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不滚动移动

回答

相关问题