Question

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

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

CSS片段的工作原理是div中的所有内容在这些较小的屏幕上变得可见，但插件仍在触发，并且一旦他们击中了相关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>

Answer 1

一种方法是在调用perfectScrollbar

之前进行一些用户代理检测

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

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

1 个答案: