Overflow y won't let scroll

Question

This is my sass code:

The scroll bar on the mobile nav shows up but I can't scroll even though I set the height to 100%, if I set the height to some pixels then the scroll lets me go down, if I use percentage, it won't let me... I've no idea why, first time I encounter this kind of problem.

#topnav {
    position: fixed;
    height: 100%;
    left: 0;
    top: 0;
    background-color: darken($default-header-bg, 10);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

    width: $mobile-nav-width;

    @include transform(translateX($mobile-nav-width * -1));
    ul {
      li {
        a {
          display: block;
          height: 40px;
          padding: 5px;

          text-align: center;
          line-height: 40px;

          border-bottom: 1px solid $default-header-bg;
        }
      }
    }
  }

I can't describe the problem, but if you add 'top:0' 'right:0' 'bottom:0' 'left:0' - you may be able to skip the height being a percentage. — Ryan Green, Jan 16 '17 at 04:27

score 0 · Answer 1 · edited May 23 '17 at 12:09

0

you will need height: 100% on the HTML tag as well

html,body {    
  height:100%;
  margin: 0;
}

please refer to scroll bar on div with overflow:auto and percentage height

edited May 23 '17 at 12:09

Community

1
1

answered Jan 16 '17 at 04:33

Desmond Lai

35
1
5

I've already done this, here's an image of what's wrong: http://image.prntscr.com/image/64e698f954344933bf128fa358d46b49.png Basically, the sidebar's height is always the same as the site's content, no matter if I set the height on the body and html to 100%, even the container's height is set to 100%, the sidebar's height is still the same as the content. – Paul Diamant Jan 16 '17 at 20:52
your window is still able to show everything in the sidebar, so it is not a situation of "overflow". How can you force the sidebar to scroll even when it can show all of its content ?? – Desmond Lai Jan 25 '17 at 03:05

score 0 · Accepted Answer · answered Jan 16 '17 at 23:06

0

Fixed it by adding the following when the sidebar opens event on JS:

 $('body').css('height', $(window).height());

answered Jan 16 '17 at 23:06

Paul Diamant

189
2
13

Overflow y won't let scroll

2 Answers2