在触摸设备上禁用 jQuery 滚动条插件？答案

【问题标题】：Disable jQuery scrollbar plugin on touch devices?在触摸设备上禁用 jQuery 滚动条插件？
【发布时间】：2014-11-14 20:26:11
【问题描述】：

我正在使用 jQuery 滚动条插件 (perfectScrollbar) 来处理桌面视口大小上的几个溢出：隐藏 div。问题的根源是滚动条不支持将滚动条（wheelPropogation）传递回触摸设备上的父级

在我针对较小视口大小的 CSS 中，我认为只需将 div 高度和溢出切换为“自动”就可以解决我的问题，因为 div 本身不需要在较小的视口上滚动。

当 div 中的所有内容都在这些较小的屏幕上可见时，CSS 部分起作用，但插件仍在触发，并导致用户在点击相关 div 时卡住。即使 div 不再可滚动，它也不会将滚动传递给父级。

有什么简单的建议吗？只有在没有触摸屏时才触发插件的最佳方法是什么？我希望仅仅因为这个问题而避免使用modernizr，但如果没有人有更好的建议，我会走这条路。

桌面 CSS：

#tasting-menu {
    margin-top: 0;
    padding-top:0; 
    padding-left:.25em;
    line-height:1em;
    background:rgba(00,00,00,.5);
    border-radius:8px;
    position:relative;
    height:23.5em;
    overflow:hidden;
    }

移动 CSS：

#tasting-menu{
    height:auto;
    overflow:auto;
    }

jQuery:

// Plugins

  $('#tasting-menu').perfectScrollbar({
    includePadding: true,
    wheelPropagation: true

HTML：

<div id="#tasting-menu>
    <p>A bunch of content</p>
</div>

【问题讨论】：

您可以为不同的视口尺寸添加一个类到主体，并且只在您为较大尺寸创建的类上使用 .perfectScrollbar。

标签： jquery html css

【解决方案1】：

一种方法是在调用完美滚动条之前进行一些用户代理检测

var is_mobile = ((/Mobile|Android|iPhone|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera) ? true : false);

if ( !is_mobile ) {
  $('#tasting-menu').perfectScrollbar({
    // ...
  });
}

【讨论】：