Jump to content
Search Community

linkus

Premium
  • Posts

    3
  • Joined

  • Last visited

Posts posted by linkus

  1. Here's a small demo with the bare minimum (open link on an iOS device, it's a debug view link):

    See the Pen gOojdxR by linkus (@linkus) on CodePen



    On iOS (both safari and chrome) the scroll fps drops down massively while touching the screen. Once I stop touching (after flicking) it's smooth.
    Also, on iOS safari the browser bars show/hide, while on iOS chrome they don't (which is the expected behavior). Also, on iOS safari it sometimes starts jumping while in mid-scroll.
    And another interesting thing, even though the documentation states that there's no smoothing of the native scroll, it still doesn't look like native scroll, as it scrolls faster than my finger.

    I've been using 🍑 ASScroll up until now, which works 100% perfectly on all devices, it never shows/hides the url bars on any browsers, doesn't lag while touch-scrolling, always perfectly reports the scroll positions and it relies on native scroll on touch devices (all of which I wish ScrollSmoother would do too).

  2. Unfortunately I can't test it anymore, since after a few days of testing I tried my site on iOS and it's jittery and unusable as long as my finger is touching the screen (while normalizeScroll is on), so I had to move back to another smoothscroll library, at least untill this is fixed :(

  3. On 4/5/2022 at 12:50 AM, GreenSock said:

    I haven't looked at your latest CodePen, but if your goal is to allow the modal to scroll with a mouse wheel, you could intercept the wheel events and stopPropagation() if the target is in a scrollable element that's not the <body>/<html>: 

     

     

     

    const modalScroll = {
    		_handler: e => {
    			let node = e.target;
    			while (node && node.scrollHeight <= node.clientHeight) node = node.parentNode;
    			node && node !== document.body && node !== document.documentElement && e.stopPropagation();
    		},
    		enable: () => document.addEventListener("wheel", modalScroll._handler, { passive: true, capture: true }),
    		disable: () => document.removeEventListener("wheel", modalScroll._handler)
    	};

    Usage:

    modalScroll.enable();  // enable
    modalScroll.disable(); // disable

     

    Does that help?

    Hey @GreenSock, your solution works perfectly on desktop browsers, but how would you do this on touch devices?

×
×
  • Create New...