Question

我正在尝试创建一个列（<div id="scroller"></div>），用户可以在其中向上或向下无限滚动。

我相信诀窍是每当用户的滚动即将到达底部时向下增加<div id="scrollee"></div>的高度，并在每次用户滚动时向上增加其高度到达顶部。

或者（似乎更容易），每当用户的滚动即将到达底部时，<div id="scrollee"></div>的顶部都可以增加，反之亦然。

然而，我似乎找不到合适的组合。我尝试了第二个版本（增加<div id="scrollee"></div>的顶部），显然只是设法让它向下无限滚动。向上移动时减少顶部不起作用，所以我从代码中省略了那部分。

有什么建议吗？

您可以在此处看到它：http://jsfiddle.net/1uzdj12d/5/

CSS

#scroller {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 200px;
    width: 100px;
    overflow: hidden;
    border: 1px solid black;
}

#scroller>div {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%;
    overflow-x: hidden; 
}
#scrollee {
    position: absolute; 
    top: -10px;
    left: 0px;
    height: 200%; 
    width: 100%;
}
span {
    position:absolute;
    top:0px;
    left: 300px;
}

HTML

<div id="scroller">
    <div>
        <div id="scrollee"></div>
    </div>
</div>
<span></span>

的Javascript

var timeout;
$("#scroller>div").scroll(function ()
{
    clearTimeout(timeout);
    $('span').text('scrolling');
    timeout = setTimeout(function ()
    {
       $('span').text('');
    }, 500);
});

$("#scroller>div").scroll(function ()
{
    var currentTop = $("#scroller>div").scrollTop();
    $(this).find('div').css({top : currentTop});
});

Answer 1

事实证明这比我想象的容易： - ）

如果你想创建一个无限可滚动的div（在y轴上），你需要做的就是将<div id="scrollee">的高度设置为<div id="scroller">的高度 加20px 。您还需要将其初始scrollTop设置为10px（这将允许向上和向下滚动）。

现在每次滚动时，将<div id="scrollee">的scrollTop重置为10px。

您可以在此处查看我的解决方案：http://jsfiddle.net/vxzw68jk/22/

如果您想知道我使用的原因：

<div id="scroller">
  <div>
    <div id="scrollee"></div>
  </div>
</div>

而不仅仅是：

<div id="scroller">
  <div id="scrollee"></div>
</div>

这是因为如果您将#scroller>div的宽度设置为150％，则会隐藏滚动条，这可能很有用（至少对于我的项目..），您可以在此处查看：{ {3}}

<强> CSS

#scroller {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 200px;
    width: 100px;
    overflow: hidden;
    border: 1px solid black;
}

#scroller>div {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%;
    overflow-x: hidden; 
}
#scrollee {
    position: absolute; 
    top: 0px;
    left: 0px;
    height: 220px; 
    width: 100%;
}
span {
    position:absolute;
    top: 0px;
    left: 300px;
}

<强> HTML

<div id="scroller">
    <div>
        <div id="scrollee"></div>
    </div>
</div>
<span></span>

<强>的Javascript

$("#scroller>div").scrollTop(10);
var timeout;
$("#scroller>div").scroll(function ()
{
    $('span').text('scrolling');
    $("#scroller>div").scrollTop(10);
    clearTimeout(timeout);
    timeout = setTimeout(function ()
    {
        $('span').text('');
    }, 500);

});

如何创建无限可滚动div（y轴）？

1 个答案: