JQuery/JS: Phát hiện nỗ lực di chuyển của người dùng mà không bị tràn cửa sổ để cuộn đến

Question

Tôi đang làm việc trên trang web chuyển đổi và trong khi tôi muốn sử dụng thao tác cuộn của người dùng làm người khởi tạo chuyển đổi, tôi không muốn có một thanh cuộn cửa sổ.

Ngay bây giờ, tôi chỉ đơn giản là phát hiện người dùng cuộn (Tôi đã thực hiện kích thước cửa sổ của tôi 1px cao mà màn hình của người dùng đối với một thanh cuộn, mặc dù điều này là những gì tôi đang cố gắng để tránh) với jquery của

.scroll(function) 

phương pháp, và sử dụng rằng để chuyển trang của tôi, nhưng tôi muốn phát hiện nỗ lực cuộn của người dùng mà không cần phải làm tràn trang của tôi một pixel, và do đó hiển thị thanh cuộn

thế nào có thể này được làm?

Messy vá ​​khả năng mà tôi biết:

Định vị cửa sổ bên trong một wrapper bên ngoài và ẩn thanh cuộn trong tràn của wrapper. Đây là một công việc vá lỗi và không phải là một giải pháp. Nó dẫn đến nội dung trang bị lệch tâm vì không phải tất cả các trình duyệt đều sử dụng cùng chiều rộng cho thanh cuộn của chúng.

Answer 1

Hãy xem question này. Tôi đã sử dụng nó làm tài liệu tham khảo để thực hiện điều này fiddle.

Works only in 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'); 
    } 

}); 

Works in Chrome, IE, Opera and 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'); 
    } 
}); 

Bạn sẽ phải để ràng buộc nó vào một yếu tố kéo dài toàn bộ màn hình trình duyệt của bạn.

Answer 2

Câu trả lời từ TreeTree có thể được đơn giản hóa thành một chức năng hỗ trợ tất cả các trình duyệt. Kết hợp các sự kiện chuột và DOMMouseScroll từ jQuery supports one or more event parameter(s). Tuy nhiên, thử nghiệm của tôi cho thấy trên() không hoạt động trong Firefox mới nhất. Sử dụng bind() để thay thế. Bạn cũng có thể kết hợp việc khai báo var đồng bằng để hỗ trợ tất cả các trình duyệt:

$('html').bind('mousewheel DOMMouseScroll', function (e) { 
    var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail); 

    if (delta < 0) { 
     console.log('You scrolled down'); 
    } else if (delta > 0) { 
     console.log('You scrolled up'); 
    } 
}); 

Answer 3

Các giải pháp hiện đại dựa trên wheel sự kiện (IE9 +)

$('selector').on('wheel', function(event) { 
    var delta = { 
    x: event.originalEvent.deltaX, 
    y: event.originalEvent.deltaY 
    }; 

    if (delta.x != 0 || delta.y != 0) { 
    //user scrolled 
    } 
});