CODEWITHSUNDEEP
javascriptcssmobilescroll
Roland
Roland

Reputation: 9731

scrolling on mobile devices

This question is more of an advice research, I do hope that it will be helpful for others and it won't closed, as I'm not quite sure where to ask for advice on this matter.

I've been developing for mobile for the past 6 months and I had the occasion to deal with all kinds of situations and bugs on various devices.

The most troubling was the scrolling issue, when it comes to scrolling in multiple areas of the website. On three projects that I have been working on I've been building a navigation that behaves the same way that the native iOS Facebook app has, or the Google website on mobile, etc. And for each one I came up with different solutions.

But a few days ago I have just released a new JavaScript library, drawerjs, that can be used to generate such navigation (so called off canvas concept). The difference between the other libs and this one is that is library agnostic, and it acts on touch behavior (the same way that the Facebook app behaves) not just open / close on click.

One of the things that I have left to implement is a solution for scrolling inside the menu and the navigation without affecting one another (most of the time when you scroll in such way, the content tends to scroll together with you menu or after you have reached the end of the menu scrolling).

I have two solutions in mind:

So I'm not quite sure which approach I should take, or if there any better solutions for that. I'm also trying to keep in mind that some users would like to hide the url bar, so scrolling on the body / html would have to be kept (on the y axis).

Upvotes: 4

Views: 11885

Answers (2)

Vrashabh Irde
Vrashabh Irde

Reputation: 14377

You could do touchmove . But as far as I understand, you want something like this? http://jsfiddle.net/2DwyH/

using 

var menu = $('#menu')

menu.on('mousewheel', function(e, d) {
    if((this.scrollTop === (menu[0].scrollHeight - menu.height()) && d < 0) || (this.scrollTop === 0 && d > 0)) {
        e.preventDefault();
    }
});

Using this plugin from Brandon Aaron - github : https://github.com/brandonaaron/jquery-mousewheel

And it should work with Android: What DOM events are available to WebKit on Android?

Some more info here: Prevent scrolling of parent element?

Also without using the plugin above , using only jQuery you could do this like it says on the link above - answer from Troy Alford

$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.height(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;

    var prevent = function() {
        ev.stopPropagation();
        ev.preventDefault();
        ev.returnValue = false;
        return false;
    }

    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);
        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

The JS Fiddle he mentions: http://jsfiddle.net/TroyAlford/4wrxq/1/

Upvotes: 4

Bikas
Bikas

Reputation: 2759

Why not just provide a fixed height to your widget (min and max will also do). Then define like these -

height: x px;
overflow-y: auto;

This way till the focus is inside the widget, it'll only overflow the widget, once outside the page will scroll without affecting widget content at all.

Upvotes: 1

Related Questions