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

【问题标题】：perfect-scrollbar area doesn't scroll on mobile完美滚动条区域不会在移动设备上滚动
【发布时间】：2014-11-15 10:03:05
【问题描述】：

我使用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 区域根本不响应触摸滚动.如果你向下滚动到那个区域，你就会卡住。

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

【问题讨论】：

查看 github README，wheelPropogation 有一个注释：“目前不支持触摸事件”。手机需要吗？如果是这样，为什么不进行一些用户代理检测以停止调用它。
好吧，那应该没关系。我没有将wheelPropogation 设置为任何内容，并且我不希望事件传播，我希望滚动条完全关闭，并让本机滚动行为接管。滚动条没有出现，这正是我想要的，但它仍在以某种方式破坏本机滚动条。
我的评论的后半部分会证明一个有效的解决方案吗？如果用户代理是移动的，不完全调用它？
这可行。我怎样才能检测到呢？
我将在答案中发布格式

标签： javascript jquery html css mobile

【解决方案1】：

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

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

【讨论】：

虽然这是一个很好的解决方案，但我意识到如果我测量 window.innerWidth 并将其与 768 像素的引导程序 .col-xs 断点进行比较，它会更加健壮。 innerWidth 完美对齐。

【解决方案2】：

这是完美的工作。 window.innerWidth 与 Bootstrap 列断点完全对齐。

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

【讨论】：