2

So I had an issue where I had a custom modal window open up on click and move to the top of the viewport, problem was, when you scrolled up you could see the page beneath, so I needed to limit the scrolling so you couldn't scroll up once the modal was open. Here's the jquery I used.

var top = window.pageYOffset;

$(document).on("scroll", function(e){
    var windowScrollTop = $(window).scrollTop();
    if(windowScrollTop < top){
        console.log("not allowed");
        $(document).scrollTop(top);
    }
    else{
        console.log("allowed");
    }
});

This works fine for preventing scrolling, but it creates a flicker at the top of the page when you try to scroll up (only been tested on mac). It's not so bad on firefox for mac, just a little strip of white, but on chrome for mac, you can see a good bit of the page underneath flicker when you try to scroll up. Is there any way to get around this and make the scroll prevention cleaner?

EDIT: for an example, I'm trying to make the scrolling behave similarly to this page. Click on one of the case studies to open it and you will notice it opens to the top of viewport, not the document, and scrolling above the top of the modal is not possible. https://infinum.co/client-work

EDIT EDIT: The only css I have applied on this div is overflow:hidden and position:absolute. As for html, it's just a div with content being loaded in dynamically, so it changes, but the overall structure is the same for every modal.

EDIT EDIT EDIT: I've added a codepen, but it doesn't display the behavior that I am describing with chrome. On codepen it appears to work fine. http://codepen.io/kathryncrawford/full/ZWYLva/

To be super clear, this is only an issue on chrome for mac, for some weird reason. Here's a gif showing the behavior

Kathryn Crawford
  • 611
  • 1
  • 10
  • 27
  • 1
    Have you tried any of the answers here: http://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery – Tony Hinkle Feb 29 '16 at 21:00
  • I've tried setting overflow to hidden, but I think this is a browser specific issue, and that doesn't work. I suppose I could move the scroll bar up to the top of the document on click, but I don't think that would look very good. I'd do it as a last resort though. – Kathryn Crawford Feb 29 '16 at 21:12
  • Also to be clear, I don't want to prevent scrolling completely, I just want to prevent the user from scrolling above the top of the modal window. – Kathryn Crawford Feb 29 '16 at 21:16
  • It seems like this should be possible with css. Could you post up some of the html / css you're using? – sm1215 Feb 29 '16 at 21:21
  • This seems to be working fine for me. But I am on Chrome. – Luke Feb 29 '16 at 21:24
  • @Mirabilis, are you on Chrome for mac? It's not working on mac for me, but perhaps this is a mac only issue? – Kathryn Crawford Feb 29 '16 at 21:26
  • No I'm on Windows 7 actually... – Luke Feb 29 '16 at 21:27
  • @KathrynCrawford Refer to this. You could simply disable background once popup is opened with css. http://stackoverflow.com/questions/17103723/disable-background-using-css-when-popup-appear You could share your html and css structure and work it out from there. – pratikpawar Feb 29 '16 at 21:36
  • 1
    You could try using a fixed position and setting the top, right, bottom, and left properties all to 0. This should fully cover your page and I believe prevent the user from scrolling above the modal. See this jsfiddle for a quick demo. (scroll to the bottom of the preview pane and click "open sesame") https://jsfiddle.net/sm1215/v5scyemh/ – sm1215 Feb 29 '16 at 21:49
  • @sm1215 I tried fixed, but it also prevented scrolling within the modal, which is a problem since it'll be just as long as the body :( – Kathryn Crawford Feb 29 '16 at 22:34
  • @dk_dragonknight I've added a codepen with my code in it. Unfortunately it doesn't show the issue I'm describing since it's inside the codepen framework. – Kathryn Crawford Feb 29 '16 at 22:34
  • ahh, gotcha. I made some adjustments, switched to absolute positioning and brought in a height property I saw they were using in your linked example. https://jsfiddle.net/sm1215/v5scyemh/1/ – sm1215 Feb 29 '16 at 22:40
  • Hey @sm1215. I believe the difference between our code is that I am opening a modal after scrolling down, and the modal is opening to the top of the viewport, and not the document. – Kathryn Crawford Feb 29 '16 at 23:01
  • 1
    @KathrynCrawford Ok, yup I see. Looks like it could have had something to do with OSX's elastic scrolling. Glad to see you found a solution – sm1215 Mar 01 '16 at 14:46

1 Answers1

0

One of our devs found a solution (after hours of trying, ugh). We set the modal to position: absolute and overflow: scroll, then when we opened it set the body to overflow: hidden. That prevented scrolling on the body and allows us to scroll the modal. We also had to change the height of the modal to animate to 100% rather than the height of the body to get this to work.

Here's an updated codepen in case you're curious

http://codepen.io/kathryncrawford/full/ZWYLva/

CSS changed

.s-case-expand {
opacity: 0;
display: none;
position: absolute;
overflow: scroll;
}

JS changed

    expandTl.set(caseExpand, {zIndex: 100, backgroundColor: color})
                .set("body", {overflow: "hidden"})
                .to(caseExpand, 0.5, {opacity: 1})
                .to(caseExpand, 1, {width: width, height: "100%", top: top, left: 0,});
Kathryn Crawford
  • 611
  • 1
  • 10
  • 27