Moving end scale

demo

  • Solve slide after inertia stop select scale
  • Compatible with ios scroll bar disappear

Solve slide after inertia stop select scale

If you search for how to detect whether the scroll bar stops, the first few answers will be the following code, without changing a word:

Var topValue = 0, interval = null; // Timer document.onscroll =function() {  
        if(interval == null)// If no timer is initiated, interval = is executed for 1 secondsetInterval("test()", 1000);  
        topValue = document.documentElement.scrollTop;  
    }  
  
    function test() {// Determine if the distance from the top is the same as it was 1 second agoif(document.documentElement.scrollTop == topValue) {  
            alert("scroll bar is stopping!"); clearInterval(interval); interval = null; }}Copy the code

This method does detect whether the scroll bar has stopped or not, but in ios, you can see a lot of jitter in the inertia phase after sliding, and the reason for that is, I’m going to do it once for 1s instead of once for 200ms, The basic is to do this in every 200 ms setInterval (document. DocumentElement. ScrollTop = = topValue is always true).

Image stabilization

If the high frequency event is triggered again within n seconds, then the time is recalculated

The demo:


    function debounce(fn) {
      lettimeout = null; // Create a flag to store the return value of the timerreturn function() { clearTimeout(timeout); // Every time the user enters, the previous one is addedsetTimeout clear Clear Timeout =setTimeout(() => {// Then create a new onesetFn function fn.apply(this, arguments); }, 500); }; }function sayHi() {
      console.log('Anti-shake succeeded');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); / / image stabilizationCopy the code

Compatible with ios scroll bar disappear

.ageComponent__calibration::-webkit-scrollbar { display: none; width: 0 ! important; }Copy the code

CSS solution can only solve the problem in Android, ios will still appear, can only be solved by the principle of the parent element cover scroll bar

ageComponent .OverflowEle { width: 100%; height: 65px; overflow: hidden; } .ageComponent__calibration { display: flex; width: 261px; /*width: 100%; */ height: 75px; overflow-y: hidden; overflow-x: scroll; }Copy the code

The source address

GitHub if useful to you, please give a star ~