how to prevent scrolling through fixed element

Question

I've this html setup...

body
  .top
  .content

top is fixed fullscreen popup with some other content in it. However, while scrolling reaches to an end in the .top>ul the background item starts to scroll. Which is very nauseating and makes site all slowish on tablets.

On tablets, even when i add overflow hidden to body using jquery it doesn't prevents it for some reason from scrolling the background even sometimes when it's not reached end.

I want no scrolling of background page when popup is on top of the page. It's suppose to be a new slide.

What can i do preferable structure wise, then css, and lastly js.

Demo http://jsfiddle.net/techsin/0bv9g31k/

* {padding: 0; margin: 0;}
.top {
    position: fixed;
    background-color: rgba(0,0,0,.3);
    height: 100%;
    width: 100%;
    overflow: auto;
}

ul {
    text-align: center;
    background-color: rgba(23,44,134,.8);
    color: #fff;

    box-sizing: border-box;
    overflow: auto;
    height: 300px;
    width: 50%;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0;
    left:0;
    right:0;
    overflow: hidden;
}

.cont {
    width: 400px;
    margin: auto;
}

Rick Hitchcock · Accepted Answer · 2015-03-25T13:50:07.477

7

These functions freeze and unfreeze the body element, while allowing children to scroll if they have the appropriate overflow property:

function freeze() {
  var top= window.scrollY;

  document.body.style.overflow= 'hidden';

  window.onscroll= function() {
    window.scroll(0, top);
  }
}

function unfreeze() {
  document.body.style.overflow= '';
  window.onscroll= null;
}

Working Fiddle

edited Mar 25 '15 at 13:50

answered Mar 21 '15 at 21:08

Rick Hitchcock

35,202
5
48
79

This has side effect of resetting scroll to top so if use has scrolled 1000px below opening and closing tab would rest it to 0 highly annoying – Muhammad Umer Mar 24 '15 at 20:57
Doing so has also side effects if i scroll the chikdre of fixed element dont scroll maybe im not using it right – Muhammad Umer Mar 24 '15 at 22:04
I've updated my answer. I gave a jQuery solution to a similar question at http://stackoverflow.com/questions/28053277/preventing-page-scroll-disabling-drag/28053693#28053693. – Rick Hitchcock Mar 25 '15 at 13:52
Btw scrolling happens only ff with body overflow hidden. But this takes care of it – Muhammad Umer Mar 25 '15 at 15:20
Great. You don't even need `overflow: hidden` for this to work, but it would be confusing to have a scrollbar that's non-functional. – Rick Hitchcock Mar 25 '15 at 15:24
Yea i dont like scroll bar as most other sites overlay doesnt show scroll bar through them so mine will look badly done at least to me – Muhammad Umer Mar 25 '15 at 16:08

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

I believe you'll find a solution here, particularly the answer by Troy Alford: Prevent scrolling of parent element? I suspect your question will be flagged as a duplicate.

I would have added this as a comment on your question but I don't have enough reputation points yet. I also don't feel good about trying to pass off any of the answers on that question as my own, so I'll simply answer with that link and hope it helps you.

edited May 23 '17 at 12:33

Community

1
1

answered Mar 21 '15 at 20:22

Benjamin Ray

1,855
1
14
32

accepted answer's solution isn't working in the example he provided – Muhammad Umer Mar 21 '15 at 20:25
Have you looked at Troy Alford's answer? While not the accepted one, it certainly seems to be more successful. – Benjamin Ray Mar 21 '15 at 20:26

how to prevent scrolling through fixed element

2 Answers2