Question

我有这个HTML设置......

body
  .top
  .content

top是固定的全屏弹出窗口，其中包含其他一些内容。然而，当滚动到达.top＆gt; ul的末尾时，背景项开始滚动。这非常令人作呕，并且使得网站上的网站都变得缓慢。

在平板电脑上，即使我使用jquery添加隐藏到身体的溢出物，它也不会因为某些原因阻止它滚动背景，即使有时它没有到达终点。

当弹出窗口位于页面顶部时，我不想滚动背景页面。它假设是一张新幻灯片。

我能做什么更好的结构，然后css，最后是js。

演示 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;
}

Answer 1

这些函数冻结并解冻body元素，同时允许子节点滚动，如果它们具有相应的overflow属性：

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

Answer 2

我相信你会在这里找到解决方案，尤其是Troy Alford的回答：Prevent scrolling of parent element? 我怀疑你的问题会被标记为重复。

我会将此添加为您对问题的评论，但我还没有足够的声望点。我也不想尝试将该问题的任何答案作为我自己的答案，所以我只想回答这个链接并希望它对你有帮助。

如何防止滚动固定元素

2 个答案: