Cannot scroll to element if position absolute and overflow-x hidden specified

Question

I have animated ng-view. I'm using slideup animation, which requires absolute position of elements and also overflow-x: hidden to clip the content. In one sub-page I have to use scrollTo element functionality, but it doesn't work if both 2 values are specified. Here is a main ng-view class which is required for correct animations

.wrapper {
    position: absolute !important; 
    left: 0;
    top: 0;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    overflow-x: hidden;
  }

And structure:

<div class="wrapper ng-view-div">
 <nav>
        <ul>
          <li><a href du-smooth-scroll="section-1" du-scrollspy>Section 1</a></li>
            <li><a href du-smooth-scroll="section-2" du-scrollspy>Section 2</a></li>
            <li><a href du-smooth-scroll="section-3" du-scrollspy>Section 3</a></li>
        </ul>
    </nav>

<section id="section-1" style="background-color: red">
  C
</section>
<section id="section-2"  style="background-color: blue">
  C
</section>
<section id="section-3"  style="background-color: green">
  C
</section>
</div>

I prepared plnkr to easily show how it looks like for now. Is there any other way to achieve scroll working but with this two values ?

This seems an angularjs bug. The native .scrollIntoView({behavior: 'smooth'}) works properly. — Oriol
– Oriol, Commented Feb 27, 2016 at 22:59

Pang · Accepted Answer · 2017-07-21 01:32:01Z

2

Here, height:100% in the wrapper CSS class creates an issue. Please use the wrapper CSS class below.

.wrapper {
    position: absolute !important; 
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    overflow-x: hidden;
}

edited Jul 21, 2017 at 1:32

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered May 12, 2016 at 7:53

Hardik Patel

3,9581 gold badge27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kxyz Over a year ago

It's really working, hmm do you know why this height property causes the problem ? Thank you

Collectives™ on Stack Overflow

Cannot scroll to element if position absolute and overflow-x hidden specified

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related