How do I scroll in a
- within a fixed

Question

I have a div which has to scroll. The problem is that it's within a fixed div. I tried to fix this in different ways, I went through these posts:

Div with scrollbar inside div with position:fixed

Have a fixed position div that needs to scroll if content overflows

but none of them worked for me.

I'd like to test it with you guys and find out what's the problem.

I am working on a mobile responsive website. It has a nav menu button that opens .list div up - when clicking the menu button. I inserted the div of the .list right after the nav bar.

When the menu opens it doesn't show all list items in my tag. I have to give my main div .list different height sizes and I find it not so efficient.

I will paste my relevant code part of the nav bar, and the relevant CSS parts.

HTML:

<div class="list">
  <h2 id="cat-header"> ALL CATEGORIES</h2>
    <ul class="sports">
      <li class="mainli"></li>
      <li class="mainli"></li>
      <li class="mainli"></li>
    </ul>
</div>

CSS:

.sports{
  /*display: none;*/
  padding: 0 ;
  background-color: #fff;
  margin: 0;
  width:100%;
  /*height: 210%*/
  -webkit-overflow-scrolling: touch;
}

.list{
  width: 99.9%;
  /* overflow: hidden; */
  /* overflow-y: scroll; */
  /* top: 65%; */
  overflow-x: hidden;
  /*overflow-y: scroll;*/
  height: 75%;
  display: none;
  -webkit-overflow-scrolling: touch;
}

when clicking #mob-menu-btn it opens .list and makes my whole tag fixed:

$('#mob-menu-btn').click(function(){

var isHidden = $('.sports').is(':visible');

    if (isHidden){
        $( "body" ).removeClass( "makeFixed" );
    } else {
        $( "body" ).addClass( "makeFixed" );
    }
    $('.list').slideToggle("fast");

})

my .makeFixed looks like this:

.makeFixed{
    position: fixed;
}

I tested this last, and it didn't solve my problem:

.makeFixed{
    position: fixed;
    top: 0;
    bottom:0;
    overflow-y:scroll;
    overflow-x:hidden;
}

and changed height: auto; and overflow-y: scroll; within .sports and .list.

What might be the problem?

enter image description here

somethinghere · Accepted Answer · 2015-01-19T09:37:03.317

I have a problem with the following:

if (isHidden){
    $( "body" ).removeClass( "makeFixed" );
} else {
    $( "body" ).addClass( "makeFixed" );
}

having the following CSS:

.makeFixed{
    position: fixed;
}

Which means you are fixing the body to... the body? Here is my suggestion:

// I'll keep your HTML intact
<div class="list">
  <h2 id="cat-header"> ALL CATEGORIES</h2>
    <ul class="sports">
      <li class="mainli"></li>
      <li class="mainli"></li>
      <li class="mainli"></li>
    </ul>
</div>

// Your list will be your fixed element. It might be better to call this your nav.
.list {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: height 500ms;
    overflow-x: hidden;
}
// I add an active state for it. It will also nicely animate thanks to the previously named transition.
.list.active {
    height: 99%;
}

// I only toggle the .active class on the click of the mobile button
$('#mob-menu-btn').click(function(){ $(".list").toggleClass("active"); });

This way you simplify your menu quite a bit. You animate with CSS, you have a simple wrapper that determines where your menu will be positioned and how, and the contents will push the overflow to be scrollable if they are larger.

Also, 'overflow: auto' is unnecessary, I have not come across a need for this. Heres an example where the yellow area is fixed to be very heigh so the scrolling will work, but the gist is the same (actually, I've adjusted all values to make the example more visually obvious):

window.onload = function(){
document.getElementById("button").addEventListener("click", function(){
 if(document.getElementById("list").className == "active"){
  document.getElementById("list").className = "";
 } else {
  document.getElementById("list").className = "active";
 }
});
}

#list {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: height 500ms;
    overflow-x: hidden;
    background: blue;
}
#list.active {
    height: 80%;
}

#list ul {
 height: 3000px;
 background: yellow;
}
#button {
 z-index: 4;
 position: absolute;
 top: 10px;
 left: 10px;
  background: #fff;
}

<div id="button">click me</div>
<div id="list">
  <h2 id="cat-header"> ALL CATEGORIES</h2>
    <ul class="sports">
      <li class="mainli"></li>
      <li class="mainli"></li>
      <li class="mainli"></li>
    </ul>
</div>

Thanks, looks like a really nice solution! :D When I asked how to create a list for a mobile, a lot recommended to make the body as fixed. and not the list itself. next time I will play this before. I'll wait for more solutions, If you have any other solution that will make it work without changing a big part of my code, I'll be happy to hear. If I'll see that there is no other way so I'll go with your advise mentioned above and mark it as an answer. Thank you very much for your effort! :D — Imnotapotato, Jan 19 '15 at 09:55
A fixed body wouldn't work at all, actually, fixed means fixing something to the body (well, technically to the viewport, but in practise that's a negligible difference). Anyhow, this is how I'de do it (simple because it simplifies a lot of code). Good luck though! — somethinghere, Jan 19 '15 at 09:59

score 0 · Answer 2 · answered Jan 19 '15 at 08:30

0

Use overflow: auto; on the div that you want to scroll, if the div have right height this will work

answered Jan 19 '15 at 08:30

Leonardo Salles

841
6
4

I did this already and didn't work. I edited this second and mentioned this too – Imnotapotato Jan 19 '15 at 08:31
1

Check this site in mobile resolution, the menu is equal and if your add overflow: auto; in menu-content div this scroll, for test add more itens by using dev tools and add overflow auto to menu-content https://www.aids.gov/ – Leonardo Salles Jan 19 '15 at 08:35

Milind Rajput · Answer 3 · 2015-01-19T09:18:52.457

0

Give the height to the div with overflow-y:scroll !important and like write your div like this..

<div style="overflow-y:scroll !important;height:80px;">
/*your scrollable content
</div>

edited Jan 19 '15 at 09:18

answered Jan 19 '15 at 09:09

Milind Rajput

61
10

score 0 · Answer 4 · answered Jan 19 '15 at 09:20

0

Try position the list by using

.list{
  width: 99.9%;
  /* overflow: hidden; */
  /* overflow-y: scroll; */
  /* top: 65%; */
  overflow-x: hidden;
  /*overflow-y: scroll;*/
  height: 75%;
  display: none;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  z-index:99999;
}

answered Jan 19 '15 at 09:20

Hashes

110
8

I want to use height: auto; so I won't have to change in every mobile (the height property) – Imnotapotato Jan 19 '15 at 09:35
pls don't abuse z-index like that. – Alex Jones Sep 29 '21 at 10:21

score 0 · Answer 5 · answered Jan 19 '15 at 09:27

0

Try this..

<h2 id="cat-header">ALL CATEGORIES</h2> <div style="overflow-y:scroll ;height:80px;border:1px solid #000"> <ul class="sports"> <li class="mainli">hello</li> <li class="mainli">hello</li> <li class="mainli">hello</li> </ul> </div>

answered Jan 19 '15 at 09:27

Milind Rajput

61
10

ALL CATEGORIES
hello

hello

hello
– Milind Rajput Jan 19 '15 at 09:28
Dude, markdown requires you to indent your code with four spaces to escape it. Just click the `{}` button on the ditor or wrap everything in '`' (special developers quotes!) – somethinghere Jan 19 '15 at 09:29
I want to use height: auto; so I won't have to change in every mobile (the height property) – Imnotapotato Jan 19 '15 at 09:36
you have to fix the height property so overflow can occur !! – Milind Rajput Jan 19 '15 at 09:42
else you can create responsive class to adjust the height according to mobile size – Milind Rajput Jan 19 '15 at 09:43
I know, that's why I asked for a solution for this.. But for me it's just not working http://jsfiddle.net/x39Q5/3/ – Imnotapotato Jan 19 '15 at 09:44

How do I scroll in a - within a fixed

5 Answers5

How do I scroll in a
- within a fixed