代码之家 › 专栏 › 技术社区 › Lawrence

只在页面元素中滚动,而不是整个页面

html javascript

Lawrence · 技术社区 · 14 年前

有没有注意到,当你用鼠标滚轮滚动溢出的DIV或TEXT区域,并且滚动到底部时,整个页面开始滚动?

这能预防吗?

我对jquery的scroll()事件处理程序进行了一次快速测试,但似乎太迟了。

这是测试代码,如果你想玩的话。

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
  $(function() {
    $('#scroller').scroll(function() {
      $('#notification').css('display','block').fadeOut();
      return false;
    })
  })
  </script>
</head>
<body style="height: 2000px">
  <div id="scroller" style="width: 500px; height: 500px; overflow: scroll; margin: 50px">
    <div style="width: 1000px; height: 1000px; background: #ddd"></div>
  </div>
  <div id="notification" style="display:none">Bang</div>
</body>
</html>

1 回复 | 直到 13 年前

Steve 14 年前

这个JS可以做到这一点,基本上只要在鼠标悬停在Div滚动条上时将body overflow设置为hidden,然后在鼠标悬停时将其设置为normal。

$("#scroller").hover(
  function () {
        $('body').css('overflow','hidden');
  }, 
  function () {
        $('body').css('overflow','auto');
  }
);

在Safari、Firefox和IE8上测试

推荐文章

Softly · 单选按钮未按预期取值

1 年前