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

Question

我在JavaScript

中做了一个水平滚动菜单

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

它运行良好，但感觉过于紧张。我添加了 behavior: 'smooth' 到 scrollBy ，现在看起来 wheel 事件重叠了。我还发现了一些油门：

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 中没有活动。当我添加一个时，没有任何动静。 是否有更好的解决方案来使其顺利，如果没有，我应该如何使 'throttle' 工作？

Answer 1

您可能想要使用 JavaScript 的 requestAnimationFrame along with CSS's 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>

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

Scroll event with smooth scrollBy does not work correctly

javascript

scroll

throttling

dom-events