3

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

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

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

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

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

我有两个解决方案：

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

  • 第二种方法是使用overflow-scrollingiOS 拥有的本机，并提供与第一种方法中描述的相同的感觉。这样做的缺点是只有 iOS 设备具有良好的抗性功能，但据说第一种方法不会那么麻烦。

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

4

2 回答 2

4

你可以做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：Android上的 WebKit 可以使用哪些 DOM 事件？

这里有更多信息：防止滚动父元素？

同样不使用上面的插件，只使用 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/

于 2013-08-15T07:03:09.613 回答
1

为什么不只为height您的小部件提供一个固定的（min并且max也会这样做）。然后像这样定义 -

height: x px;
overflow-y: auto;

这样直到焦点在小部件内部，它只会溢出小部件，一旦页面外部滚动，根本不会影响小部件内容。

于 2013-08-08T13:29:40.620 回答