我已经使用meteorjs构建了我的网站blainehansenpiano.com，它在浏览器和ipad上都可以正常运行并且看起来不错。我在可滚动区域上使用了Perfect-scrollbar，它工作正常。
我也在使用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附加了滚动条的区域根本无法响应触摸滚动。如果向下滚动到该区域，则只会卡住。
是什么原因造成的？
这很完美。在window.innerWidth排队恰与引导柱断点。
var is_xs = window.innerWidth < 768;
if (!is_xs) {
// initialize scroller
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句