Question

我的网站是快速响应的，我希望将iScroll 5添加到我的移动网站，我遇到的问题是，除非我定义宽度和高度，滚动时一切都变得生涩。

例如我有一堆带有width:100%;的div或div随着内容变大，所以如何定义高度和宽度如下：

“iScroll需要知道包装器和滚动器的确切尺寸。它们是在启动时计算的，但是如果你的元素大小发生变化，我们需要告诉iScroll你正在弄乱DOM。”

Answer 1

我不明白你的问题。

<div id="wrapper">
    <div class="scroller">
        <div class="content">
            <!-- Stuff -->
        <div>
    <div>
<div>

如果你打包这样的内容，你只需要为“wrapper”和“scroller”定义宽度和高度。仅为您的内容设置宽度。

#wrapper {
    width: 100%;
    height: 100%;
    position: relative; /* or absolute */
}
.scroller {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}
.content {
    width: 100%;
}

您无需设置身高。只需在调整大小后刷新iScroll即可获得新尺寸：

var scroller = new IScroll('#wrapper', {
    scrollX: false,
    scrollY: true,
    momentum: true,
    useTransform: true,
    useTransition: true,
    click: true
});

$(window).on('resize', function() {
    setTimeout(function() {
        scroller.refresh();
    }, 100);
});

iScroll要求您定义宽度和高度，但如果您有响应式网站，您如何定义宽度？

1 个答案: