Sometimes the horizontal and vertical scroll bars will appear simultaneously when the page content is too much. Dragging the scroll bar with the mouse feels cumbersome, so try dragging dom directly to achieve the same effect of dragging the scroll bar

  • Dom structure is as follows
<style>
  .father {
    height: 50vh;
    width: 70vw;
    overflow: auto;
    border: 1px solid;
  }
  
  .child {
    width: 500vw;
    height: 500vh;
  }
</style>.<body>
  <div class="father">
    <div class="child"></div>
  </div>
</body>
Copy the code

So first clear your head

  • Listen for both mousedown and Mousemove events on the parent node
  • When press and move are triggered at the same time, calculate how far X and Y move
  • Apply the distance moved to the scroll bar

So, code!

1. Obtain the parent element node

let father = document.querySelector('.father');
Copy the code

2. Define the variables to be used

// Check whether the mouse is pressed down
let isMouseDown = false;
// Record the Y axis rolling distance
let scrollTop = 0;
// Record the X-axis rolling distance
let scrollLeft = 0;
// Record the X coordinate of the mouse point
let startX = 0;
// Record the Y coordinates of the mouse point
let startY = 0;
Copy the code

3. Listen for mouse press events

Father. AddEventListener ('mousedown', e => {// change the down state isMouseDown = true; StartX = e.offsetx; // Record the mouse position to calculate the mouse distance. startY = e.offsetY; });Copy the code

4. Listen for mouse movement events

father.addEventListener('mousemove'.e= > {
  // Check whether the mouse is pressed when moving
  if (isMouseDown) {
    // Get the distance moved after the mouse is pressed down
    let offsetX = e.offsetX - startX;
    let offsetY = e.offsetY - startY;
    // PS: Note that when the mouse moves up, the scrollbar should move down, so this is all subtracted distance
    scrollTop = scrollTop - offsetY;
    scrollLeft = scrollLeft - offsetX;

    // TODO

    // Assign the calculated distance to the scrollbarfather.scrollTop = scrollTop; father.scrollLeft = scrollLeft; }}Copy the code

5. Change the status when the mouse is up

father.addEventListener('mouseup'.() = > {
  isMouseDown = false;
})
Copy the code

However, when we use it, we will soon find that when the scrollbar slider is moved to the end point, the calculation distance will continue to accumulate, resulting in the result that when the accumulated distance exceeds the limit, when the mouse moves backward, the slider will not move immediately. So change the above code

PS1: add variables to calculate the limit distance in Step2

// The maximum distance that can be moved horizontally
let limitX = father.scrollWidth - father.offsetWidth;
// The maximum distance that can be moved vertically
let limitY = father.scrollHeight - father.offsetHeight;
Copy the code

PS2: add judgment in Step4

.// TODO
if (scrollTop >= limitY) {
  // When the slider moves to the bottom
  scrollTop = limitY;
} else if (scrollTop <= 0) {
  // When the slider moves to the top
  scrollTop = 0;
}

if (scrollLeft >= limitX) {
  // When the slider moves to the left
  scrollLeft = limitX;
} else if (scrollLeft  <= 0) {
  // When the slider moves to the right
  scrollLeft = 0; }...Copy the code