在移动设备上滚动 [英] 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.

过去 6 个月我一直在为移动设备进行开发，我有机会处理各种设备上的各种情况和错误.

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.

当涉及在网站的多个区域滚动时，最令人不安的是滚动问题.在我一直从事的三个项目中，我一直在构建一个导航，其行为方式与原生 iOS Facebook 应用程序或移动设备上的 Google 网站等相同.对于每个项目，我想出了不同的解决方案.

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.

但前几天我刚刚发布了一个新的 JavaScript 库，drawerjs，可以使用生成这样的导航(所谓的画布外概念).其他库和这个库之间的区别在于库不可知，它作用于触摸行为(与 Facebook 应用程序的行为方式相同)，而不仅仅是在点击时打开/关闭.

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

我有两个解决方案:

• 一种方法是使用我用于拖动内容和显示导航的相同原则，在 touchmove 上，我阻止了文档/内容的默认滚动，然后开始翻译滚动量相同的内容.并且具有与触摸滑块相同的抵抗行为(当您超出边界并放开时，内容将转换回来，因此它不再超出边界，或者以相同的行为滑动).

• One approach would be to use the same principle I'm using for dragging the content and showing the navigation, on touchmove I prevent the default scrolling on document / content and I start translating the contents with the same amount you scroll. And with the same resistant behavior as a touch slider would have (when you exceed the boundaries and let go, the contents would translate back so it doesn't exceed the boundary anymore, or on swipe with the same behavior).

第二种方法是使用 iOS 的原生 overflow-scrolling，它会提供与第一种方法中描述的相同的感觉.这样做的缺点是，只有 iOS 设备才会具有良好的抗性功能，但据说第一种方法不会那么麻烦.

A second approach would be using the native overflow-scrolling that iOS has and would offer the same feel as described in the first approach. The downside of this would be that only iOS devices would have the nice resistant feature, but it would be, supposedly, less of a hassle the the first approach.

所以我不太确定我应该采取哪种方法，或者是否有更好的解决方案.我还试图记住，有些用户想要隐藏 url 栏，因此必须保留在 body/html 上的滚动(在 y 轴上).

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

推荐答案

You can do touchmove .但据我所知，你想要这样的东西?http://jsfiddle.net/2DwyH/

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

使用

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();
    }
});

使用 Brandon Aaron 的这个插件 - github:https://github.com/brandonaaron/jquery-鼠标滚轮

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

它应该适用于 Android:Android 上的 WebKit 可以使用哪些 DOM 事件?

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

这里有更多信息:防止父元素滚动?

同样不使用上面的插件，只使用 jQuery 你可以像上面链接中所说的那样做 - 来自 Troy Alford 的回答

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();
    }
});

他提到的 JS Fiddle:http://jsfiddle.net/TroyAlford/4wrxq/1/

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

这篇关于在移动设备上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！