问题描述
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 的 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>