perfect-scrollbar area不滾動移動

我用meteorjs來建立我的網站，blainehansenpiano.com，它的工作原理和在瀏覽器和ipad上看起來不錯。我在可滾動區域使用了perfect-scrollbar，它工作正常。perfect-scrollbar area不滾動移動

我也使用bootstrap3，因此我的網站可以在手機上輕鬆查看。我有這樣的模板：

<template name="home"> 
    <div class="row body-film"> 
     <div class="col-sm-7"> 
      {{> backgroundPictures}} 
     </div> 
     <div class="col-sm-5 block-film scroller"> 
      <div id="newsfeed"> 
       ... 
      </div> 
     </div> 
    </div> 
</template>

隨着這一less：

html, body, .container-fluid { 
    .fill-height(); 
} 
.body-film { 
    .fill-height(); 
    background-color: @color; 
} 
.block-film { 
    .fill-height(); 
    background-color: @different-color; 
} 

.fill-height { 
    height: 100%; 
} 

.scroller { 
    .fill-height(); 
    overflow-y: hidden; 
} 

@media (max-width: @screen-xs-max) { 
    html, body, .container-fluid, .body-film, .block-film, .scroller { 
     height: auto !important; 
     overflow-y: visible !important; 
    } 
}

預期的行爲是，雖然該網站是從.col-sm尺寸爲.col-lg，該塊大小的窗口和滾動條手柄所有的運動。然後，當網站的大小爲.col-xs時，這些列將被分解爲塊，height和overflow將被更改，並關閉滾動條並讓本機行爲接管。

在我的瀏覽器中這會很有幫助。當我調整我的窗口到這個小的級別時，沒有滾動條被顯示，並且事情自然滾動。

然而，當我嘗試這個移動瀏覽器（所有的人，我試過），該.block-film面積必須連接到它根本不響應觸摸滾動滾輪。如果您向下滾動到該區域，就會卡住。

這可能是什麼原因造成的？

來源

2014-11-06 blaineh

查看github自述文件，'wheelPropogation'有一個註釋：「目前不支持觸摸事件」。你需要手機嗎？如果有的話，爲什麼不做一些用戶代理檢測來停止調用它。 – elzi 2014-11-06 22:44:50

好吧，那應該不重要。我沒有將'wheelPropogation'設置爲任何內容，並且我不希望該事件傳播，我希望滾動器*完全關閉*，並且讓本機滾動行爲接管。 Scroller沒有出現，這是我想要的，但它不知何故仍在破壞本機滾動。 – blaineh 2014-11-06 22:50:06

我的評論的後半部分會證明是一個有效的解決方案嗎？如果用戶代理是移動的，不要完全調用它？ – elzi 2014-11-06 22:56:59

這是可以正常使用。 window.innerWidth與Bootstrap列斷點完全一致。

var is_xs = window.innerWidth < 768; 
if (!is_xs) { 
    // initialize scroller 
}

來源

2014-11-15 02:03:05 blaineh

按照該意見，因爲在移動不是要求完美的滾輪是一個有效的解決方案，嘗試做一些用戶代理檢測爲這樣：

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

if (!is_mobile) { 
    // whatever the init call is 
    perfectScroller.init() 
}

來源

2014-11-06 22:59:42 elzi

雖然這是一個很好的解決方案，但我已經意識到，如果我測量window.innerWidth並將其與768 px的引導程序「.col-xs」斷點進行比較，它會更加健壯。「innerWidth」完美對齊。 – blaineh 2014-11-07 02:55:14

perfect-scrollbar area不滾動移動

回答

相關問題