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中滚动时，屏幕上就会出现“滚动”一词。你可以玩弄这个小提琴：http://jsfiddle.net/f1hxndt4/4/

以上有两个问题：

在“滚动条”内滚动显然需要无限（向上和向下） - 目前它只允许50000px滚动。
“卷轴”必须是不可见的。目前滚动条可见。

非常感谢任何建议，谢谢！

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')右侧的滚动条将不再可见。

Answer 2

如果你绑定了＆＃39;滚动＆＃39;事件，那么你将需要使该区域可滚动（正如你所说，它击败了你正在努力实现的目标！）。相反，您需要侦听通常会导致滚动的事件，例如侦听mousehweel事件。您可能还希望收听滑动事件等。

您可以使用事件的wheelData属性来计算滚动距离，以确定滚动增量。（在Firefox和Opera中，您需要使用detail属性。）

var onMouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll"
                                                               : "mousewheel";
var timeout;
$("#scroller").on(onMouseWheelEvent, function (e)
{
    clearTimeout(timeout);
    $('span').text('scrolling');

    var scrollEvent = e.originalEvent;
    var delta = scrollEvent.detail? scrollEvent.detail*(-120) : scrollEvent.wheelDelta
    console.log(e.originalEvent.wheelDelta);

    timeout = setTimeout(function ()
    {
       $('span').text('');
    }, 1000);
});

Answer 3

演示： http://jsfiddle.net/techsin/o2n2q5p4/ 改进：http://jsfiddle.net/techsin/o2n2q5p4/1/

这类似于您发布的链接，但它依赖于向上滚动的数量但依赖于鼠标滚轮数据创建自己的数量。我尝试解决原来的问题。

如果有什么不清楚，请问:(没有jquery仅用于挑战）

var a = 0，topSpeed = 20，deg = 0;

window.addEventListener('mousewheel', function(e){
    if (a<topSpeed) {
        a = a + ((e.wheelDelta/1000) * topSpeed);
    }

});

var img = document.getElementById('gear');

function animate() {
    a = +(a*.95).toFixed(2);
    if (Math.abs(a)<1) a=0;
    deg = (deg+a) % 360;
    img.style.transform = 'rotate('+deg+'deg)';
    requestAnimationFrame(animate);
}

animate();

如何在HTML页面上创建隐形可滚动区域？

3 个答案: