Use native touch scrolling?

[23d1]

Hey Baptiste,

Is there a simple way to use the native scroll smoothing on touch devices?

What I mean is (for example); the native iOS Safari scrolling is natively smooth and responsive, but with smooth-scrolling, it's either slow, or at least different enough to feel a bit "off". I want to keep smooth-scrolling enabled for the parallax and so forth, but not the overall scrolling movement.

Would setting ease to 0 and vs: { preventTouch: true } or some similar setting combination suffice?

[23d1]

After some investigation, using the native scroll seems like a good solution. However, some initialized smooth scrollbars like a cart and menu actually add twice the pixels needed to the helper... Any help much appreciated. The numbers are correct, but for some reason it scrolls twice the amount.

[23d1]

I'm currently doing a workaround where I counteract the doubled movement by applying an el.style.top = callbackValue + 'px', curious if there's any simpler way to solve. Ended up with native: true, which looks/works great with scrollEasing: 1 although anchor links don't have a smooth scroll...

[baptistebriel]

Hi @23d1 — I'm not sure what you meant by "doubled movement"? I would not recommend doing el.style.top in the requestAnimationFrame, since you'd like to only animate using transforms for good performances.

What I usually do for mobile devices is use the default overflow-y: scroll css value. Unfortunately it's not really implemented in this version of smooth-scrolling, so you might need to write your own custom Class and copy what you'd need from this repository. It basically means initializing a 'scroll' event for devices, and getting the scrollY value in this event. On desktop, you can add a VirtualScroll event and just do like this repository. It asks to write custom code, but I could share with you some code I've been personally writing lately if you want.

Let me know!

[23d1]

Hey @baptistebriel — By "doubled movement" I mean it scrolls twice the distance (even though the transform numbers are correct), I suppose this could be to some odd double-scrolling of the div's overflow scroll together with the transforms being applied. I'd be happy to take a look at some code. :) While on the subject of extending/custom classes, any thoughts on adding PgUp/PgDn/Home/End key listeners (sorry, I always sneak in extra random questions, hah)?

[baptistebriel]

Do you have this double movement issue on the demos/native one? This is definitely because there is a transform applied + original scroll. The section you are using should have a position: fixed applied. Check out the demo and what's different!

For the PgUp/PgDn/Home/End keys, it should be enabled if you're using native: false, with VirtualScroll.

You can have a look at this code, tho it's based on Backbone/Marionette views. You should be able to update this to a default ES6 class, but there will be some undefined variables since it's from a recent project... I wish I had time to update this repository with this version of smooth-scrolling that I'm using now in my projects! Feel free to ask if you have any questions, hope I could help more!

https://gist.github.com/baptistebriel/f046b0b14dd498b3f931b41bd456eed4

[23d1]

No, the demos work fine—although I do have the container set to fixed, as it's an overlay cart and menu class. Gonna sift through this code and see if I can muster the JS skills to pull it off. Haha.

Regarding the PgUp/PgDn/Home/End keys, only Space (not Shift+Space) and the Arrow keys function to scroll the document with native: false—and looks like that's the way it's set up here;

var keyCodes = {
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40,
    SPACE: 32
};

and here;

VirtualScroll.prototype._onKeyDown = function(e) {
    var evt = this._event;
    evt.deltaX = evt.deltaY = 0;
    var windowHeight = window.innerHeight - 40

    switch(e.keyCode) {
        case keyCodes.LEFT:
        case keyCodes.UP:
            evt.deltaY = this.options.keyStep;
            break;

        case keyCodes.RIGHT:
        case keyCodes.DOWN:
            evt.deltaY = - this.options.keyStep;
            break;
        case keyCodes.SPACE && e.shiftKey:
            evt.deltaY = windowHeight;
            break;
        case keyCodes.SPACE:
            evt.deltaY = - windowHeight;
            break;
        default:
            return;
    }

    this._notify(e);
};

Anyway, thanks so much! Hope you'll get some time over to update this repo—absolutely love it, especially the ability to have native scrolling. Killer! 👍

I'll report back when/if I have a solution.