Detect When Scrolling Has Finished When Using 'Scroll-Behavior: Smooth'

Detect when scrolling has finished when using `scroll-behavior: smooth`

The only feasible option appears to be to just wait until there aren't any more scroll events:

let timer;
window.addEventListener( 'scroll', () => {
    clearTimeout( timer );

    timer = setTimeout( () => {
        callback();
    }, 300 );
}, { passive: true } );

---

Update: Firefox 109 and Chrome 110 now have a scrollend event: https://caniuse.com/mdn-api_element_scrollend_event

Accurately detect if a browser supports smooth scrolling?

The most native way to do this would be to use the @supports CSS at-rule to check for browser support:

@supports (scroll-behavior:smooth) {
    /* Supports smooth scrolling */
}

To do this check in JavaScript, you may use this function on the CSS object:

if(window.CSS.supports('scroll-behavior', 'smooth')) {
    // Supports smooth scrolling
}

How can I detect window scroll ended in javascript?

You could use requestAnimationFrame to detect when the scrollTop is greater than y

requestAnimationFrame is way better than setting both an interval and an event listener on scroll, for a matter of performance.

const element = document.getElementById('element');
const y = element.getBoundingClientRect().top + window.scrollY;

function checkScrollEnd() {
  if ((window.scrollY || document.body.scrollTop || document.documentElement.scrollTop) < y) {
    window.requestAnimationFrame(checkScrollEnd);
  }
  else {
    alert('end of scroll')   
  }
}

window.requestAnimationFrame(checkScrollEnd);

window.scroll({
  top: y,
  behavior: 'smooth'  
});

---

Example fiddle

Detect if browser has smooth scrolling feature already

Several years later, there now is a CSS property in the Working Draft for this:

scroll-behavior /p>

So instead of the Javascript in my original question, or similar, we can just do this:

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Right now, it seems to work for all browsers except IE and Edge, and since this is just a nice-to-have feature that makes things look a bit nicer... Yeah, I don't really care about IE or Edge. /p>

Android: How to detect when a scroll has ended

Here is how I solved the problem. Hope this helps.

// declare class member variables
private GestureDetector mGestureDetector;
private OnTouchListener mGestureListener;
private boolean mIsScrolling = false;

public void initGestureDetection() {
        // Gesture detection
    mGestureDetector = new GestureDetector(new SimpleOnGestureListener() {
        @Override
        public boolean onDoubleTap(MotionEvent e) {
            handleDoubleTap(e);
            return true;
        }

        @Override
        public boolean onSingleTapConfirmed(MotionEvent e) {
            handleSingleTap(e);
            return true;
        }

        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            // i'm only scrolling along the X axis
            mIsScrolling = true;                
            handleScroll(Math.round((e2.getX() - e1.getX())));
            return true;
        }

        @Override
        /**
         * Don't know why but we need to intercept this guy and return true so that the other gestures are handled.
         * https://code.google.com/p/android/issues/detail?id=8233
         */
        public boolean onDown(MotionEvent e) {
            Log.d("GestureDetector --> onDown");
            return true;
        }
    });

    mGestureListener = new View.OnTouchListener() {
        public boolean onTouch(View v, MotionEvent event) {

            if (mGestureDetector.onTouchEvent(event)) {
                return true;
            }

            if(event.getAction() == MotionEvent.ACTION_UP) {
                if(mIsScrolling ) {
                    Log.d("OnTouchListener --> onTouch ACTION_UP");
                    mIsScrolling  = false;
                    handleScrollFinished();
                };
            }

            return false;
        }
    };

    // attach the OnTouchListener to the image view
    mImageView.setOnTouchListener(mGestureListener);
}

---

Related Topics