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

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>

Java脚本

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％，则滚动条将被隐藏，这很有用（至少对我的项目是有用的。），您可以在此处查看： http : //jsfiddle.net/8psu5L6v / 1 /

的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>

Java脚本

$("#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);

});