Question

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

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

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

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

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

我有两个解决方案：

一种方法是使用我用于拖动内容和显示导航的相同原则，touchmove我阻止了文档/内容的默认滚动，我开始翻译内容滚动的数量相同。并且具有与触摸滑块相同的抗性行为（当您超出边界并放开时，内容将向后平移，使其不再超出边界，或者以相同的行为滑动）。
第二种方法是使用iOS拥有的原生overflow-scrolling，并提供与第一种方法中描述的相同的感觉。这样做的缺点是，只有iOS设备才具有良好的抗性功能，但据推测，它可能不会像第一种方法那样麻烦。

所以我不太确定我应采取哪种方法，或者是否有更好的解决方案。我还要记住，有些用户想要隐藏网址栏，因此必须保留在主体/ 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小提琴：http://jsfiddle.net/TroyAlford/4wrxq/1/

Answer 2

为什么不向您的小部件提供固定的height（min和max也会这样做）。然后定义如下 -

height: x px;
overflow-y: auto;

这种方式直到焦点位于小部件内部，它只会溢出小部件，一旦页面外部将滚动而不会影响小部件内容。

在移动设备上滚动

2 个答案: