मैंने JavaScript में एक क्षैतिज स्क्रॉल मेनू बनाया है

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

यह ठीक काम कर रहा था लेकिन बहुत ज्यादा उछल-कूद महसूस कर रहा था। मैंने व्यवहार जोड़ा: स्क्रॉल करने के लिए 'चिकनी' और अब ऐसा लगता है कि व्हील इवेंट ओवरलैपिंग है। मुझे कुछ थ्रॉटल भी मिला:

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 में कोई इवेंट नहीं है। जब मैंने एक जोड़ा तो कुछ भी हिल नहीं रहा था। क्या इसे सुचारू बनाने के लिए कोई बेहतर उपाय है और यदि नहीं, तो मुझे 'थ्रॉटल' कैसे काम करना चाहिए?

1
Alex 12 फरवरी 2021, 04:22

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>
0
StackSlave 12 फरवरी 2021, 07:26