Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

阻止嵌套滚动条的外层滚动行为

  当存在多个带滚动条的元素嵌套时,鼠标滚轮在内层元素上的操作在内层元素无法处理时会被抛到外层元素上。这意味着,当内层元素的滚动条滚到头时,继续滚动鼠标滚轮就会影响到外层元素的滚动条。这会带来很差的用户体验,所以我们要阻止它。
  假如有下面这个结构 <style>
div {
  height:100px;width:120px;overflow:auto;
  border:1px solid #CCC;position:fixed;
}
span {display:block;height:500px;}
body {height:2000px;}
</style>
<div id="div">
  <span></span>
</div>
  鼠标滚轮在DIV滚动到边界时就会影响页面的滚动条。我也考虑了各种冒泡阻止等方法,但都没能解决这个问题。于是使用了最笨的方法,判断滚动条是否到边界以及滚轮滚动的方向来阻止默认行为。上面的HTML结构中插入SCRIPT标签,使用下面的代码即可实现。 onload=function(){
  //获取容器元素的样式高度(考虑IE兼容)
  var height=parseInt(
    (div.currentStyle||getComputedStyle(div)).height
  );

  //绑定滚轮事件(考虑FF兼容)
  "onmousewheel" in div?div.onmousewheel=wheel:
  div.addEventListener("DOMMouseScroll",wheel);

  function wheel(e){
    //获取滚动方向(考虑IE和FF兼容)
    var e=e||event,v=e.wheelDelta||-e.detail;
    //判断滚动方向和滚动条边界
    if(
      v>0&&div.scrollTop==0||
      v<0&&div.scrollTop==div.scrollHeight-height
    ){
      //阻止默认行为(考虑IE兼容)
      e.preventDefault&&e.preventDefault();
      return false;
    };
  };
};
  但这个实现还是太粗糙了,如果有更好的办法希望大家能分享下。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^