具有平滑 scrollBy 的滚动事件无法正常工作答案

【问题标题】：Scroll event with smooth scrollBy does not work correctly具有平滑 scrollBy 的滚动事件无法正常工作
【发布时间】：2021-05-15 19:33:44
【问题描述】：

我在 JavaScript 中做了一个水平滚动菜单

document.addEventListener('wheel', (e)=>{e.deltaY > 0 ? window.scrollBy({left: 100}) : window.scrollBy({left: -100})});

它工作正常，但感觉太紧张了。我在 scrollBy 中添加了行为：'smooth'，现在看起来轮子事件正在重叠。我还发现了一些油门：

function throttle (callback, limit) {
    var wait = false;                  
    return function () {               
        if (!wait) {                   
            callback.call();          
            wait = true;              
            setTimeout(function () {  
                wait = false;         
            }, limit);
        }
    }
}

function doStuff(){
    //something
}

window.addEventListener("scroll", throttle(doStuff, 100));

但我不知道如何使它工作。此EventListener 中没有任何事件。当我添加一个时，什么都没有动。 有没有更好的解决方案让它变得顺畅，如果没有，我应该如何让“油门”工作？

【问题讨论】：

标签： javascript scroll dom-events throttling

【解决方案1】：

您可能希望结合使用 JavaScript 的 requestAnimationFrame 和 CSS 的 scroll-behavior:smooth;。不幸的是，scroll-behavior 很新。

//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q; // for use on other loads
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  let w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  let w = within || doc;
  return w.querySelectorAll(selector);
}
// small library above - magic below can be put on another page using a load Event (except // end load line)
const guts = S('.guts');
let scrollL = 0;
function scrollIt(){
  guts.scrollLeft = scrollL;
}
guts.onwheel = function(e){
  let d = e.deltaY, w = this.scrollWidth, l = w - innerWidth;
  scrollL += d !== undefined && d > 0 ? 100 : -100;
  if(scrollL > l){
    scrollL = l;
  }
  else if(scrollL < 0){
    scrollL = 0;
  }
  requestAnimationFrame(scrollIt);
}
}); // end load
//]]>

/* css/external.css */
*{
  box-sizing:border-box; font-size:0;
}
html,body,.main{
  width:100%; height:100%; background:#333; margin:0;
}
.guts{
  width:100%; height:100%; padding:7px; overflow:auto; scroll-behavior:smooth;
}
.guts>div{
  width:200%; height:100%; font-size:22px;
}
.guts>div>div{
  display:inline-block; width:calc(50% - 3.5px); height:100%;
}
.guts>div>div:first-child{
  background:blue;
}
.guts>div>div:last-child{
  background:green;
}

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <div class='guts'><div><div></div><div></div></div></div>
  </div>
</body>
</html>

【讨论】：