Question

我有两个div，结构如下：

<div id="container">
  <div id="inner"></div>
</div>

外部容器div具有非常大的高度（这仅仅是为了模拟真实场景，其中父div中有很多内容）。内部div是固定位置div，具有确定的高度。溢出-y设置在内部div上，以便人们可以滚动它以查看任何不适合其定义高度的内容。

这是一个codepen：http://codepen.io/anon/pen/myVxar

如何设置它以便当您完成滚动内部div时，外部div 不会滚动？换句话说，在内部div中滚动不应该滚动外部div。

有没有办法用CSS / HTML做到这一点？如果没有，我将如何使用Javascript / Jquery？

Answer 1

您无法禁用页面的滚动，但您可以禁用鼠标滚轮事件

编辑：我不得不说，如果你在现实世界中遇到这种情况并且你完全控制前端代码，你应该重新考虑你的策略，因为绝对有更好的方法。

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function wheel(e) {
  preventDefault(e)
}
// bind some scroll functionality to the inner div

$('#inner').on('scroll', function(e){ 
    var elem = $(e.currentTarget);
    // check if user has scrolled to bottom
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()){
        // disable mouse scroll event
        if (window.addEventListener) {
            window.addEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = wheel;
        console.log('done')
    } else{
      // remove the event that disables scroll
      if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
      } 
      window.onmousewheel = document.onmousewheel = document.onkeydown = null; 
    }
});
// remove the event that disabled scroll if user mouse leaves inner container
$('#inner').mouseout(function(e){
  if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
      } 
      window.onmousewheel = document.onmousewheel = document.onkeydown = null; 
})

Answer 2

还想知道为什么要采用这种方法。我想你可能会设置较大的高度，以防内容很长，但为什么不做这样的事情？

#container {
    height:200px;
    width:300px;
    overflow:scroll;
    border:1px solid;
}

一旦内部内容溢出容器，容器将滚动 - .inner不需要任何与滚动相关的样式。如果我遗失了某些内容，请发布更多细节。

Answer 3

假设内部div并不总是覆盖其他内容......当你显示内部div时，你可以调整容器的高度和溢出：

<强> Working Example

$('#container').click(function () {
    if ($('#inner').is(':visible')) {
        $('#inner').fadeOut('slow');
        $('#container').css({
            height: 14000,
            overflow: 'auto'
        });
    } else {
        $('#inner').fadeIn('slow', function () {
            $('#container').css({
                height: "100%",
                overflow: 'hidden'
            });
        });
    }
});

#container {
    height: 14000px;
    width: 100%;
}
#inner {
    display:none;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 15px;
    font-size: 18px;
    color: #808080;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">click Me!
    <div id="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean volutpat mauris at consequat rutrum. Nam ut tempus nisl, quis luctus turpis. In eu dolor a ligula rhoncus convallis a in lectus. Cras pretium felis in justo semper convallis. Integer nisl arcu, venenatis sed odio in, accumsan consectetur mi. Sed fermentum tempus elit at varius. Proin scelerisque auctor nibh quis lobortis. Aliquam enim elit, rhoncus at ultricies a, rutrum id ipsum. Morbi eu justo id mi accumsan ullamcorper at eget risus. Curabitur elementum ultrices ex, sit amet laoreet orci. Proin lobortis quis lacus quis tristique. Nulla facilisi. Quisque vel libero quis lectus convallis volutpat. Sed ullamcorper luctus neque, id efficitur eros fermentum id. Fusce et nulla faucibus, faucibus ante id, pellentesque erat. Quisque ac feugiat nisi, eget feugiat nulla. Morbi quis interdum tellus. Etiam porttitor lacus ac orci rhoncus, eu commodo lacus tempus. Aliquam finibus egestas leo eget efficitur. Duis maximus tincidunt lorem, eu convallis ipsum feugiat lobortis. Proin auctor volutpat velit, ac suscipit neque vestibulum sed. Suspendisse pretium, libero sit amet euismod imperdiet, risus nulla sodales mi, luctus imperdiet enim augue at odio. Suspendisse mollis, eros quis malesuada feugiat, mi libero elementum odio, eu scelerisque elit nibh quis ante. Sed malesuada porttitor dui in volutpat. Praesent consequat nisi vel ipsum bibendum, at mollis nibh congue. Cras vitae turpis aliquet, sollicitudin libero ut, fringilla ex. In leo sem, mollis et quam eget, cursus laoreet quam. Fusce pulvinar felis eu finibus venenatis. Integer quis mauris commodo, sollicitudin mi ullamcorper, hendrerit justo. Donec luctus ultrices ante. Curabitur eget neque eu augue mattis elementum a vel ante. Aliquam posuere augue ac velit bibendum, ut efficitur mi convallis. Curabitur velit tellus, facilisis vel elit at, ornare scelerisque massa. Donec rhoncus eget diam non tincidunt. Ut in sapien sapien. Mauris ultricies est ut facilisis mollis. Duis finibus malesuada mollis. Praesent ultricies lectus sed dolor pellentesque, ac volutpat ipsum maximus. Donec risus nulla, accumsan vel orci sit amet, tristique rhoncus diam. Praesent malesuada tincidunt placerat. Proin at congue odio. Sed ac velit quis risus aliquet consectetur at sit amet magna. Fusce quis lacinia elit, eget tincidunt libero. Donec ac elit vel lacus iaculis aliquet vitae ut purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum mauris ipsum, at laoreet odio sodales at. Vestibulum in ex tellus. Proin non varius ligula, nec ultricies ligula. Praesent quis lacus at augue tristique faucibus. Quisque eleifend eu magna sed fermentum. Phasellus ac mattis erat. Donec pharetra nunc eget facilisis condimentum. Etiam sagittis tempus sapien, id malesuada felis pretium eu. Aenean hendrerit nec velit at euismod. Pellentesque at maximus risus, sed eleifend nisi. Sed quis interdum orci. Donec vel nisl malesuada, interdum felis at, porttitor odio.</div>
</div>

如何将滚动限制为固定Div？

3 个答案: