防止窗口向上滚动而不闪烁自定义模式打开

所以，我遇到了一个问题，我有一个自定义模式窗口打开点击并移动到视口顶部，问题是，当您向上滚动时，您可以看到页面下方，所以我需要限制滚动，以便在模式打开后无法向上滚动。这是我用过的jQuery。防止窗口向上滚动而不闪烁自定义模式打开

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"); 
    } 
});

这工作得很好，以防止滚动，但它在页面的顶部创建一个闪烁当您尝试向上滚动（只在Mac上测试过）。在mac上，firefox没有那么糟糕，只是一小块白色，但是在mac上的chrome中，当您尝试向上滚动时，您可以看到闪烁下方的页面很好。有什么办法可以解决这个问题，并使滚动预防清洁剂？

编辑：例如，我试图使滚动行为类似于此页面。点击其中一个案例研究打开它，你会注意到它会打开到视口的顶部，而不是文档，并且不可能在模态顶部滚动。 https://infinum.co/client-work

编辑编辑：唯一的CSS我在这个div上应用溢出：隐藏和位置：绝对。至于html，它只是一个动态加载内容的div，所以它会改变，但是每个模式的总体结构都是一样的。

编辑编辑编辑：我已经添加了一个codepen，但它不显示我用铬描述的行为。在codepen上它似乎工作正常。 http://codepen.io/kathryncrawford/full/ZWYLva/

要超级清晰，这只是mac上的一个问题，出于某种奇怪的原因。

来源

2016-02-29 Kathryn Crawford

你有没有尝试过任何问题的答案在这里：HTTP ：//stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with -jquery –

我已经尝试设置溢出隐藏，但我认为这是一个浏览器的具体问题，并不起作用。我想我可以通过点击将滚动条移动到文档顶部，但我认为这看起来不太好。尽管如此，我会尽力而为。 –

另外要清楚的是，我不想完全阻止滚动，我只是想阻止用户在模态窗口的顶部滚动。 –

我们的一位开发人员发现了一个解决方案（经过数小时的尝试，唉）。我们设置模式的位置：绝对和溢出：滚动，然后当我们打开它设置身体溢出：隐藏。这阻止了滚动的身体，并允许我们滚动模态。我们还必须将模式的高度更改为动画的100％，而不是身体的高度以使其起作用。

这里的的情况下，更新的codepen你好奇

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

CSS改变

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

JS改变

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,});

来源

2016-02-29 23:15:35

防止窗口向上滚动而不闪烁自定义模式打开

回答

相关问题