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时，块的大小会调整到窗口，滚动条会处理所有移动。然后，当网站的大小为.col-xs时，列会被分成块，height和overflow会被更改回来，这会关闭滚动条并让本机行为接管。< / p>

在我的浏览器上，这非常有用。当我将窗口调整到较小的级别时，不显示任何滚动条，并且事物会自然滚动。

然而，当我在移动浏览器（我尝试过的所有这些）上尝试此操作时，附加了滚动条的.block-film区域根本无法响应触摸滚动。如果向下滚动到那个区域，就会卡住。

导致这种情况的原因是什么？

Answer 1

根据评论，由于在移动设备上不调用完美滚动条是一种有效的解决方案，请尝试执行一些用户代理检测：

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

Answer 2

这很完美。 window.innerWidth与Bootstrap列断点完全对齐。

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

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

2 个答案: