禁用觸摸設備上的jQuery滾動條插件？

我正在使用jQuery滾動條插件（perfectScrollbar）來處理幾個溢出：在桌面視口大小隱藏的div。問題的根源在於，滾動條不支持將滾動（wheelPropogation）傳遞迴父設備禁用觸摸設備上的jQuery滾動條插件？

在我的CSS定位較小的視口尺寸中，我會認爲只需將div高度和溢出切換爲「自動」會解決我的問題，因爲div本身不需要在較小的視口上滾動。

由於所有div內的內容在這些較小的屏幕上都可見，但該插件仍在觸發並導致用戶在遇到有問題的div時卡住。即使div不再可滾動，它也不會將滾動傳遞給父級。

任何簡單的建議嗎？在沒有觸摸屏的情況下只能觸發插件的最佳方式是什麼？我希望避免現代化，只是爲了解決這個問題，但如果沒有人提出更好的建議，那麼就會走這條路。

桌面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>

來源

2014-11-14 sforcash

您可以添加一個類的機構視不同規格和只在您的大尺寸創建的類使用.perfectScrollbar之前做一些用戶代理檢測。 – RooWM 2014-11-14 23:05:28

一種方法是調用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({ 
    // ... 
    }); 
}

來源

2014-11-14 20:38:47 elzi

禁用觸摸設備上的jQuery滾動條插件？

回答

相關問題