javascript - 完美滚动条区域不会在移动设备上滚动

Question

我用过 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 时， block 的大小与窗口一致，滚动条处理所有运动。然后，当网站的大小为 .col-xs 时，列被分成 block ，height 和 overflow 被改回，这就变成了关闭滚动条并让 native 行为接管。

在我的浏览器上效果很好。当我将窗口大小时调整到这么小的水平时，没有显示滚动条，并且内容自然滚动。

但是，当我在移动浏览器(我试过的所有浏览器)上尝试此操作时，附有滚动条的 .block-film 区域根本不响应触摸卷轴。如果向下滚动到该区域，就会卡住。

这可能是什么原因造成的？

Answer 1

根据评论，由于在移动设备上不调用 perfect scroller 是一个有效的解决方案，因此尝试进行一些用户代理检测:

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()
}