js控制网页滚动距离，鼠标滚轮移动距离控制，平滑滚动可改善网页体验

js控制鼠标滚轮的移动距离

此实现方法不同于诸如转盘之类的css控件。它可以直接嵌入到网页中而不会破坏页面结构，并且可以使用。需求分析

如果网页采用长页模式，请访问特斯拉官方网站。对于需要在同一页面上显示大量图像内容的网站，浏览器的默认滚动条通常一次滚动一次，这对用户体验非常不友好，还会影响页面完整性的显示效果，例如

三星官方网站

对于这么长的页面，用户需要经常使用滚轮。

在使用js引用特斯拉的官方网站后，鼠标滚轮用于控制滚动条的滚动距离，以便用户可以在滚轮的滚动中看到完整的页面。

效果

比较

普通滚动滚动控件

实现思路

首先，很明显，需要滚动和定位页面中的多少个元素。例如，如果存在这样的列表[ele1，ele2，ele3]，则当用户滚动滚轮时，由于触发了滚轮事件，我们需要暂时停止滚轮事件的响应，条件是滚动中的卡住点滚轮（滚动时明显的暂停感）将在每次移动时被触发，因此在触发之后，它需要停止一段时间（以防止重复触发），并且在触发之后，如果代码实现了滚动，它将您需要防止用户滚轮的默认行为，否则两种滚动方法都将起作用，并且页面将冻结。

在阐明了滚轮事件的原理之后，您需要确认是向上滚动还是向下滚动，以及一次滚动的距离是多少。根据滚轮事件，判断上下是很好的。滚动距离需要根据实际情况而定。例如，如果我们在页面上抓住3个点，我们可以得到这3个点与文档顶部之间的距离，然后实现页面滚动功能以将页面滚动到所需位置。

技术要点/知识点

需要了解一些技术要点：

preventDefault，以防止浏览器发生默认事件； window.scrollTo页面滚动；鼠标滚轮触发事件； document.querySelector选择页面元素； element.offsetTop当前元素与文档顶部之间的距离；

了解这些要点，我们就能实现我们的需求。

在代码中，

有两个关键变量，一个是cur_index，它描述了当前滚动到哪个元素。

调用，描述它当前是否正在滚动，在moveTo函数中，首先判断该变量以避免重复触发。践踏记录

在一开始，我希望使用滚动事件来控制浏览器的滚动条。在实际的写作中，发现滚动事件时更改高度是无效的。

原因是滚动事件监视更改文档位置的任何触发功能或用户触发的操作。因此，在监视用户操作时更改文档高度是不可行的。这将循环触发滚动事件，并导致页面失败。停止触发滚动，此功能无法实现。

mousewheel事件仅监视滚轮，因此该功能最终得以实现。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .a,.b,.c{
    width: 100%;
    height: 100vh;
    background:red;
  }
  .b{
    background: blue;
  }
  .other{
    width: 100%;
    height: 30vh;
    background:black;
  }
  .other_1{
    background:white;
  }
  .other_2{
    background:black;
  }
  .other_3{
    background:white;
  }
</style>
<body>
  <div class="other other_0"></div>
  <div class="other other_1"></div>
  <div class="other other_2"></div>
  <div class="other other_3"></div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <script>
    window.addEventListener("mousewheel",WheelGo)
  var cur_index = -1
  var invoke = false
  list = [{ele:"other_0"},{ele:"other_1"},{ele:"other_2"},{ele:"other_3"},{ ele: "a" }, { ele: "b" }, { ele: "c" }]
  list = initSrollPosition("body",list)
  function initSrollPosition(ele,list){
  
    var container = document.querySelector(ele)
    for(var i in list){
      list[i].position = document.querySelector("."+list[i].ele).offsetTop
    }
    return list
  }
  //window.addEventListener("mousewheel",go)
    //
    // window.addEventListener("scroll",judge)
    // function judge(e){
    //   console.log(e)
    //   var scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      
    //   var first_position = list[0].position/2
    //   console.log(scrollPosition)
    //   if(scrollPosition>=first_position){
       
    //   }
        
    // }
    // function loseWheelControl(){
      
    //     window.removeEventListener("mousewheel",go)
    //     console.log("loseWheelControl")
     
    // }
    function stopDefault(e){
     e.preventDefault()
     return false
    }
    function WheelGo(e){
      //判断当前所处位置
     
      var isDown = e.deltaY>0?true:false
      stopDefault(e)
      if(invoke){
      return
    }
      moveTo(isDown)
        
    }
    function moveTo(isDown){
    var cur_state
    if(isDown){
      cur_index = cur_index>=list.length-1?list.length-1:cur_index+1
      var cur_state = list[cur_index]
    }else{
      cur_index = cur_index<=0?0:cur_index-1
       cur_state = list[cur_index]
    }
   
    console.log("invoke")
 
    invoke = true
    
      window.scrollTo({top:(cur_state.position),left:0,behavior:"smooth"})
      
      setTimeout(()=>{
        invoke = false
      },500)
    }
    
  </script>
</body>
</html>

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-325203-1.html