javascript - 如何在 HTML 页面上创建不可见的可滚动区域？

Question

我想在用户在不可见的 div(“滚动条”)内向上或向下滚动时触发一个事件。想象一下以下设置:

CSS

#scroller {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 50px;
}
#scroller div {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 50000px;
    width: 100%;
}
span {
    position: absolute;
    top: 20px;
    left: 100px;
}

HTML

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

Javascript

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

每当用户在上面的 div 中滚动时，“scrolling”这个词应该出现在屏幕上。你可以玩这个 fiddle :http://jsfiddle.net/f1hxndt4/4/

上面有两个问题:

1. 在“滚动条”内滚动显然需要无限(向上和向下)——目前它只允许 50000 像素的滚动。
2. “滚动条”需要不可见。目前滚动条可见。

如有任何建议，我们将不胜感激，谢谢!

Answer 1

如果有人感兴趣，这里是解决方案:http://jsfiddle.net/f1hxndt4/14/

CSS

#scroller{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 50px;
    overflow: hidden;
}
#scroller .parent{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100px;
    overflow-x:hidden;
}
#scroller .child {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 50000px;
    width: 100%;
}

span {
    position: absolute;
    top: 20px;
    left: 100px;
}

HTML

<div id="scroller">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>
<span></span>

Javascript

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

解释:

您需要创建一个可滚动的 <div> : $('#scroller .parent')然后把它放在一个更窄的<div>里面: $('#scroller') .将后者的溢出设置为“隐藏”。

那样$('#scroller .parent')右边的滚动条将不再可见。