Use native touch scrolling? about smooth-scrolling HOT 6 CLOSED

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.

from smooth-scrolling.

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...

from smooth-scrolling.

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!

from smooth-scrolling.

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)?

from smooth-scrolling.

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

from smooth-scrolling.

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.

from smooth-scrolling.