其他分享
首页 > 其他分享> > 鼠标横向滚动条 和 鼠标滚动方向

鼠标横向滚动条 和 鼠标滚动方向

作者：互联网

鼠标横向滚动的思路

  1. 阻止鼠标滚动影响纵向滚动条的行为
  2. 找到影响滚动条的容器的 scrollLeft 属性为
  3. 根据鼠标的滚轮方向，决定滚动条是向左还是向右滚动

案例实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.min.js"></script>
  </head>
  <style>
    #son {
      height: 4000px;
      width: 4000px;
    }

    #parent {
      position: absolute;
      top: 500px;
      left: 500px;
      border: 1px solid red;
      width: 300px;
      height: 300px;
      overflow: auto;
    }
  </style>
  <body>
    <!-- 父容器的宽度是500px，子容器的宽度是4000px，因此父容器会出现滚动条 -->
    <div style="padding: 15px;" id="parent">
      <div id="son"></div>
    </div>
  </body>
  <script>
    let son = document.getElementById("son");
    let parent = document.getElementById("parent");
    window.onload = function() {
      let $son = $("#son");
      son.onwheel = function(e) {
        //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）
        e.preventDefault();
        console.log(e);
        // son 组件本身是没有滚动条的，因此 scrollLeft 属性为0
        console.log($son.scrollLeft());
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
              //事件
              console.log(parent.scrollLeft);
              parent.scrollLeft = parent.scrollLeft - 50
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
              //事件
              console.log(parent.scrollLeft);
              parent.scrollLeft = parent.scrollLeft + 50
            }
        } else if (e.detail) {  //Firefox滑轮事件
            if (e.detail> 0) { //当滑轮向上滚动时
              //事件
              console.log(parent.scrollLeft);
              parent.scrollLeft = parent.scrollLeft - 50
            }
            if (e.detail< 0) { //当滑轮向下滚动时
              //事件
              console.log(parent.scrollLeft);
              parent.scrollLeft = parent.scrollLeft + 50
            }
        }
      }
    }
  </script>
</html>

理解测试过程中 scrollLeft 属性值为0的情况

<!DOCTYPE html>
<html lang="en" id="root">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.min.js"></script>
  </head>
  <style>
    #son {
      height: 2000px;
      width: 2000px;
    }
  </style>
  <body id="parent">
    <div id="son"></div>
  </body>
  <script>
    let sonWidget = document.getElementById("son");
    let parent = document.getElementById("parent");
    let root = document.getElementById("root");
    debugger
    window.onload = function() {
      let $son = $("#son");
      sonWidget.onwheel = function(e) {
        //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）
        e.preventDefault();
        console.log(e);
        console.log($son.scrollLeft());
        // 获取 body scrollLeft 属性，无论滚动条放在那里，都是为0，因为body是没有滚动条的
        console.log(parent.scrollLeft);
        // 实际上滚动条是 根节点 html 的，因此想要获取滚动条的宽度，应用用 document的scrollLeft
        console.log($(document).scrollLeft())
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
              //事件
              console.log(root.scrollLeft);
              root.scrollLeft = root.scrollLeft - 50
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
              //事件
              console.log(root.scrollLeft);
              root.scrollLeft = root.scrollLeft + 50
            }
        } else if (e.detail) {  //Firefox滑轮事件
            if (e.detail> 0) { //当滑轮向上滚动时
              //事件
              console.log(root.scrollLeft);
              root.scrollLeft = root.scrollLeft - 50
            }
            if (e.detail< 0) { //当滑轮向下滚动时
              //事件
              console.log(root.scrollLeft);
              root.scrollLeft = root.scrollLeft + 50
            }
        }
      };
    };
  </script>
</html>

解释说明

  1. son 组件的宽度是4000px
  2. 父容器 body 组件因此被子组件“撑开”，导致父组件的宽度也是 4000px
  3. 浏览器出现了滚动条
  4. 滚动条是整个窗口的，不是body的，因此真正的滚动条是html不是 body的，所以查询body的scrollLeft属性始终为0

如何判断鼠标滚动方向

var scrollFunc = function (e) {  
	e = e || window.event;  
	if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
		if (e.wheelDelta > 0) { //当滑轮向上滚动时  
		   //事件
		}  
		if (e.wheelDelta < 0) { //当滑轮向下滚动时  
			//事件 
		}  
	} else if (e.detail) {  //Firefox滑轮事件  
		if (e.detail> 0) { //当滑轮向上滚动时  
		   //事件 
		}  
		if (e.detail< 0) { //当滑轮向下滚动时  
			//事件  
		}  
	}  
	}  
	//给页面绑定滑轮滚动事件  
	if (document.addEventListener) {//firefox  
	document.addEventListener('DOMMouseScroll', scrollFunc, false);  
}  
//滚动滑轮触发scrollFunc方法  //ie 谷歌  
window.onmousewheel = document.onmousewheel = scrollFunc;
  1. 需要考虑兼容性问题 火狐 和 非火狐
  2. 火狐根据 detail 属性，如果大于零是向上滚动，如果小于0是向下滚动
  3. 非火狐根据 wheelDelta 属性，如果大于零是向上滚动，如果小于0是向下滚动

标签：滚动,鼠标,parent,scrollLeft,滚动条,console,滑轮
来源： https://blog.csdn.net/hbiao68/article/details/104916017