JQuery / JS：检测用户的滚动尝试，没有任何窗口溢出滚动到 [英] JQuery / JS : Detect user's scroll attempt without any window overflow to scroll to

问题描述

我正在转换网站，而我想使用用户的滚动尝试作为转换启动器，我不想有一个窗口滚动条。

I'm working on a transitioning website, and while I want to use the user's scroll attempt as the transition initiator, I don't want there to be a window scroll bar.

现在，我只是检测到用户滚动（我已经使我的窗口大小1px高的用户的屏幕为滚动条，虽然这是我的'

Right now, I'm simply detecting that the user scrolls (I've made my window size 1px taller that the user's screen for a scrollbar, although this is what I'm trying to avoid) with jquery's

.scroll(function)

方法，并使用它来转换我的页面，但我想检测用户的滚动尝试，而不必让我的页面溢出一个像素，因此显示滚动条

method, and using that to transition my page, but I'd like to detect the user's scroll attempt without having to make my page overflow by a pixel, and thus showing the scrollbar

如何做到这一点？

我知道的凌乱补丁的可能性：

Messy patch possibility that I know of:

外包装和隐藏滚动条在包装的溢出。这是一个补丁工作，而不是一个解决方案。这会导致页面内容偏离中心，因为并非所有浏览器都为其滚动条使用相同的宽度。

Positioning the window inside an outer wrapper and hiding the scrollbar in the overflow of the wrapper. This is a patch up job and not a solution. It results in the page content being off-center since not all browsers use the same width for their scrollbars.

推荐答案

请查看此问题。我使用它作为参考，使此小提琴。

Have a look at this question. I used it as a reference to make this fiddle.

< a href =https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll>仅适用于Firefox ：

$('html').on ('DOMMouseScroll', function (e) {
    var delta = e.originalEvent.detail;

    if (delta < 0) {
        $('p').text ('You scrolled up');
    } else if (delta > 0) {
        $('p').text ('You scrolled down');
    }

});

适用于Chrome，IE，Opera和Safari ：

$('html').on ('mousewheel', function (e) {
    var delta = e.originalEvent.wheelDelta;

    if (delta < 0) {
        $('p').text ('You scrolled down');
    } else if (delta > 0) {
        $('p').text ('You scrolled up');
    }
});

您必须将其绑定到跨整个浏览器屏幕的元素。

You'd have to bind it on an element that spans your entire browser screen.

这篇关于JQuery / JS：检测用户的滚动尝试，没有任何窗口溢出滚动到的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！