Mouse horizontal scroll bar and mouse scroll direction

The idea of mouse horizontal scrolling

  1. Prevent mouse scrolling from affecting the behavior of vertical scrollbars
  2. Find the scrollLeft property of the container that affects the scroll bar as
  3. Determines whether the scroll bar scrolls left or right, depending on the direction of the mouse wheel

Case realization

<!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>
    <!-- The width of the parent container is 500 px,The width of the subcontainer is 4000 px,So a scroll bar appears in the parent container -->
    <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) {
        //Disable the default behavior of the event (the mouse wheel behavior is prohibited here associated with the screen scroll bar up and down behavior)
        e.preventDefault();
        console.log(e);
        // The son component itself has no scroll bar, so the scrollLeft property is 0
        console.log($son.scrollLeft());
        if (e.wheelDelta) {  //Judge browser IE, Google pulley event
            if (e.wheelDelta > 0) { //When the pulley rolls up
              //Event
              console.log(parent.scrollLeft);
              parent.scrollLeft = parent.scrollLeft - 50
            }
            if (e.wheelDelta < 0) { //When the pulley rolls down
              //Event
              console.log(parent.scrollLeft);
              parent.scrollLeft = parent.scrollLeft + 50
            }
        } else if (e.detail) {  //Firefox wheel event
            if (e.detail> 0) { //When the pulley rolls up
              //Event
              console.log(parent.scrollLeft);
              parent.scrollLeft = parent.scrollLeft - 50
            }
            if (e.detail< 0) { //When the pulley rolls down
              //Event
              console.log(parent.scrollLeft);
              parent.scrollLeft = parent.scrollLeft + 50
            }
        }
      }
    }
  </script>
</html>

Understand the situation that the scrollLeft property value is 0 during the test

<!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) {
        //Disable the default behavior of the event (the mouse wheel behavior is prohibited here associated with the screen scroll bar up and down behavior)
        e.preventDefault();
        console.log(e);
        console.log($son.scrollLeft());
        // Get the body scrollLeft property. No matter where the scroll bar is, it is 0, because there is no scroll bar for the body
        console.log(parent.scrollLeft);
        // In fact, the scroll bar is the root node of html, so if you want to get the width of the scroll bar, use the scrollLeft of document
        console.log($(document).scrollLeft())
        if (e.wheelDelta) {  //Judge browser IE, Google pulley event
            if (e.wheelDelta > 0) { //When the pulley rolls up
              //Event
              console.log(root.scrollLeft);
              root.scrollLeft = root.scrollLeft - 50
            }
            if (e.wheelDelta < 0) { //When the pulley rolls down
              //Event
              console.log(root.scrollLeft);
              root.scrollLeft = root.scrollLeft + 50
            }
        } else if (e.detail) {  //Firefox wheel event
            if (e.detail> 0) { //When the pulley rolls up
              //Event
              console.log(root.scrollLeft);
              root.scrollLeft = root.scrollLeft - 50
            }
            if (e.detail< 0) { //When the pulley rolls down
              //Event
              console.log(root.scrollLeft);
              root.scrollLeft = root.scrollLeft + 50
            }
        }
      };
    };
  </script>
</html>

interpretative statement

  1. The width of the son component is 4000px
  2. The parent container body component is "opened" by the child component, resulting in the width of the parent component is also 4000px
  3. Scroll bar appears in browser
  4. The scroll bar is the whole window's, not the body's, so the real scroll bar is html's, not the body's, so the scrollLeft property of querying the body is always 0

How to judge the mouse rolling direction

var scrollFunc = function (e) {  
	e = e || window.event;  
	if (e.wheelDelta) {  //Judge browser IE, Google pulley event               
		if (e.wheelDelta > 0) { //When the pulley rolls up  
		   //Event
		}  
		if (e.wheelDelta < 0) { //When the pulley rolls down  
			//Event 
		}  
	} else if (e.detail) {  //Firefox wheel event  
		if (e.detail> 0) { //When the pulley rolls up  
		   //Event 
		}  
		if (e.detail< 0) { //When the pulley rolls down  
			//Event  
		}  
	}  
	}  
	//Binding wheel scrolling events to pages  
	if (document.addEventListener) {//firefox  
	document.addEventListener('DOMMouseScroll', scrollFunc, false);  
}  
//Scroll wheel triggers scrollFunc method / / ie Google  
window.onmousewheel = document.onmousewheel = scrollFunc;
  1. Need to consider compatibility issues Firefox and non Firefox
  2. According to the detail s attribute, if it is greater than zero, Firefox will scroll up; if it is less than zero, Firefox will scroll down
  3. Non Firefox scrolls up if greater than zero and down if less than zero according to the wheelDelta attribute
1174 original articles published, 86 praised, 1.1 million visitors+
His message board follow

Tags: Firefox IE Google JQuery

Posted on Tue, 17 Mar 2020 12:50:20 -0400 by buddok