mattbryson / TouchSwipe-Jquery-Plugin

TouchSwipe is a jquery plugin to be used with jQuery on touch input devices such as iPad, iPhone etc.
http://labs.rampinteractive.co.uk/touchSwipe/
Other
4.05k stars 1.68k forks source link

How to make smooth vertical scrolling of element? #340

Closed ordin2342 closed 5 years ago

ordin2342 commented 6 years ago

Hi and thanks for the great library!

I want to make a smooth scrolling, vertically overflowing menu bar. Right now I made it like this:

jQuery(document).ready(function() {
    var arNav = jQuery('nav#menu');
    var arMenu = arNav.find('.ar-main-menu-container');

    var arMenuWidth = arMenu.outerWidth()

    arNav.swipe( { swipeStatus:swipe2 } );

    function swipe2(event, phase, direction, distance, duration) {
        //console.log( phase +" you have swiped " + distance + "px in direction:" + direction );

        var currentPos = arMenu.offset();
        console.log(currentPos);
        var stepSize = Math.abs(distance)/(Math.sqrt(duration));

        if ((direction=='right')&&(currentPos.left+stepSize < 0)) {
            arMenu.offset({top: currentPos.top, left: currentPos.left+stepSize});
        }

        if ((direction=='left')&&(currentPos.left-stepSize >= -arMenuWidth)) {
            arMenu.offset({top: currentPos.top, left: currentPos.left-stepSize});
        }
    }
});

It works ok but there's like a rubberbanding effect, especially when I change swipe-direction with the finger. Also the scrolling is not very smooth, it doesn't feel native. Could you give me a little hand?

Cheers!

mattbryson commented 5 years ago

Performance could be down to many things so hard to see without a working example.

Closing for now, but please re open if you still need help and have some examples.

ordin2342 commented 5 years ago

Hi Matt,

we had to abandon the vertical scroll because of the issues, but I think this should really be part of modern mobile sites and your API could provide that. If you ever find the time to work on this I think it would be of good use for a lot of people.

The basic idea was to continue using the wide desktop menu on mobile and just swipe left or right to the parts that are hidden due to the small screen. Sure it requires some addition JavaScript to handle clicks and unfolding submenues as well as some additional CSS but that shouldn't be of your concern, I guess every web dev can handle that himself if the swipe worked out-of-the-box.

Anyways, have a great time, your library is very useful. Don't give it up!