在移动设备上滚动

Question

这个问题更像是一个建议研究，我希望它对其他人有所帮助并且它不会关闭，因为我不太确定在哪里寻求关于这个问题的建议。

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

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

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

我要实现的一件事是在菜单和导航内部滚动而不相互影响的解决方案（大多数情况下，当您以这种方式滚动时，内容往往会与您的菜单一起滚动或在您到达菜单滚动的末尾之后）。

我有两个解决方案：

• 一种方法是使用与我在touchmove 上用于拖动内容和显示导航的相同原理我阻止文档/内容的默认滚动并开始翻译相同的内容您滚动的数量。并且具有与触摸滑块相同的抵抗行为（当您超出边界并放手时，内容会向后平移，因此不再超出边界，或者以相同的行为滑动）。

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

所以我不太确定我应该采用哪种方法，或者是否有更好的解决方案。我还想记住，有些用户希望隐藏 url 栏，因此必须保持在 body / html 上的滚动（在 y 轴上）。

Answer 1

你可以做 touchmove 。但据我了解，你想要这样的东西吗？ 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-mousewheel

它应该适用于 Android：What DOM events are available to WebKit on Android?

更多信息在这里：Prevent scrolling of parent element?

同样不使用上面的插件，只使用 jQuery 你可以像上面链接中所说的那样做 - 来自 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/

Answer 2

为什么不给你的小部件提供一个固定的height（min 和max 也可以）。然后像这样定义 -

height: x px;
overflow-y: auto;

这样直到焦点在widget内部，它只会溢出widget，一旦页面外部滚动，完全不会影响widget内容。