如何防止滚动固定元素

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

body
  .top
  .content

top是固定的全屏弹出窗口,其中包含一些其他内容.但是,当滚动到达.top> 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;
}

Rick Hitchco.. 6

这些函数冻结和解冻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;
}

工作小提琴

这些函数冻结和解冻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;
}

工作小提琴