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

每当用户在不可见的div a“scroller”中向上或向下滚动时，我想触发一个事件。想象一下下面的设置：

CSS

HTML

每当用户在上面的div中滚动时，屏幕上就会出现滚动这个词。你可以摆弄这把小提琴：

上述问题有两个：

“滚动器”内的滚动显然需要无限上下-目前它只允许50000像素的滚动。 滚动条必须是不可见的。当前，滚动条可见。

---

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

若您绑定到“scroll”事件，那个么您将需要使该区域可滚动，正如您所说的，这会破坏您想要实现的目标！。相反，您需要侦听通常会导致滚动的事件，例如侦听mouseheel事件。您可能还希望收听刷卡事件等

您可以使用事件的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);
});

---

如果有人感兴趣，以下是解决方案：

CSS

HTML

说明：

您需要创建一个可滚动的：$'scroller.parent'，然后将其放在一个更窄的：$'scroller'中。将后者的溢出设置为“隐藏”

这样，$'scroller.parent'右侧的滚动条将不再可见。

演示： 改进：

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

如果有什么不清楚的地方，只需问：没有用于挑战的jquery

var a=0，最高速度=20，度=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();

---

我认为你需要通过调整鼠标滚轮上的y偏移来伪造可滚动内容，而不是滚动。因此，您有一个具有固定宽度/高度的父元素，并隐藏了溢出。然后在你的内部有你的无限元素，它可以是任何东西。然后你可能需要像parent-on mouseenter和mouseleave这样的监听器设置一个在mousewheel插件上选中的布尔值：-这就是我至少要开始的方式。这可能已经回答了你的问题：将不可见的滚动框放在一个溢出隐藏的div中，这个div很窄要隐藏滚动条，然后使用setTimeout/clearTimeout与滚动侦听器组合以重置滚动位置以生成假无限效果为什么？您是否只想检测滚动而不让用户能够滚动，尤其是当光标位于某个位置时？嘿，Khior，谢谢您的回答。我已经试过了，我知道它很好用，但我想使用jQuery的.scroll；这样我就知道用户每次滚动的距离（以像素为单位，向上或向下）。onMouseWheelEvent是否提供了此类值？恐怕此事件返回的值将不可用。此鼠标滚轮事件不会返回覆盖的像素总数。我想旋转一个基于scroll的元素，就像这个家伙一样：但是我只需要在页面的不可见部分向上或向下滚动时才需要旋转元素。然而，我需要滚动的像素数，以便将其与旋转相关联。毕竟我已经计算出来了。我找到了一种隐藏滚动条的方法：。现在我需要考虑一些逻辑来使滚动无限大。你可以得到元素被滚动的像素总数。

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

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);
});

#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;
}

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

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

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();