javascript - 禁用网页上的滚动并仅允许在页面部分上滚动

Question

我在一个页面网站上工作，我想做的是禁用网页上的 scorlling，并且只使用指向 id 的导航栏链接在各部分之间进行转换。为此，我使用了这个 jquery 代码

$(document).ready(function() {
    $('.js-scrollTo').on('click', function() { 
        var page = $(this).attr('href'); 
        var speed = 1000;
        $('html, body').animate( { scrollTop: $(page).offset().top }, speed );
        return false;
    });
});

还有这个在 CSS 上

html, body {margin: 0; height: 100%; overflow: hidden}

一切正常，除了一个问题是，当我在一个包含大量内容的特定部分时，我无法在其中滚动，我想弄清楚的是:如何在不滚动所有网页的情况下启用部分本身的滚动

Answer 1

如果我没有正确理解你的问题，在这种情况下你可以做的是将 overflow-y:scroll 添加到你希望滚动的内容的包装 div 中。

例如，假设我们有一个包含一些内容的 div#test:

<div id="test">
   ... Some content
</div>

然后我们可以简单地应用样式:

#test {
  height: 300px;
  width: 300px;
  overflow-y: scroll;
  background: #ff1000;
}

这是实际操作:http://codepen.io/anon/pen/RRYERR