Dừng trang từ cuộn nếu di chuột div

Question

Tôi có một div có thể cuộn được, nhưng bất cứ khi nào bạn đạt đến đáy/trên của nó, nó bắt đầu cuộn toàn bộ trang. Điều đó có thể gây phiền toái cho người dùng cuộn nhanh, và sau đó toàn bộ trang bắt đầu cuộn bất ngờ.

Tôi cần điều gì đó nếu bạn đang di chuột qua div, trang không thể cuộn được.

Tôi đã thử điều này bằng cách thêm CSS khi tôi di div ...

body { 
    overflow:hidden; 
} 

... Nó hoạt động nhưng có một vấn đề. Thanh cuộn biến mất và có vẻ ngu ngốc để nó biến mất/tái xuất hiện. Bất kỳ cách nào để đạt được hiệu quả tương tự nhưng giữ cho thanh cuộn hiển thị? Tôi đã thấy nó được thực hiện với trò chuyện Facebook.

Answer 1

Đây là một cách rất đơn giản để ngăn chặn sự lan truyền không có plugin, chỉ jQuery.

Cập nhật: Mã đã được cập nhật để hoạt động chính xác trong IE9 +. Chưa được thử nghiệm trong các phiên bản trước.

Trước tiên, hãy tạo một lớp học trên <div> để đánh dấu nó là có hành vi này. Trong ví dụ của tôi, tôi sử dụng lớp học .Scrollable.

<div class="Scrollable"> 
    <!-- A bunch of HTML here which will create scrolling --> 
</div> 

Các jQuery để vô hiệu hóa là:

$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) { 
    var $this = $(this), 
     scrollTop = this.scrollTop, 
     scrollHeight = this.scrollHeight, 
     height = $this.height(), 
     delta = (ev.type == 'DOMMouseScroll' ? 
      ev.originalEvent.detail * -40 : 
      ev.originalEvent.wheelDelta), 
     up = delta > 0; 

    var prevent = function() { 
     ev.stopPropagation(); 
     ev.preventDefault(); 
     ev.returnValue = false; 
     return false; 
    } 

    if (!up && -delta > scrollHeight - height - scrollTop) { 
     // Scrolling down, but this will take us past the bottom. 
     $this.scrollTop(scrollHeight); 
     return prevent(); 
    } else if (up && delta > scrollTop) { 
     // Scrolling up, but this will take us past the top. 
     $this.scrollTop(0); 
     return prevent(); 
    } 
}); 

Về bản chất, điều này làm là để phát hiện hướng di chuyển đã được yêu cầu trong (dựa trên originalEvent.wheelDelta: dương = up, tiêu cực = down). Nếu được yêu cầu delta của sự kiện mousewheel sẽ di chuyển qua top hoặc bottom của số <div>, hãy hủy sự kiện.

Trong IE, đặc biệt, di chuyển các sự kiện đi qua khu vực có thể cuộn của phần tử con, sau đó cuộn lên phần tử cha và cuộn tiếp tục bất kể sự kiện bị hủy. Bởi vì chúng ta hủy bỏ sự kiện trong mọi trường hợp, và sau đó kiểm soát việc di chuyển trên con thông qua jQuery, điều này được ngăn chặn.

Điều này dựa trên cách thức mà this question giải quyết vấn đề, nhưng không yêu cầu plugin và trình duyệt chéo tương thích với IE9 +.

Here is a working jsFiddle thể hiện mã đang hoạt động.

Here is a working jsFiddle thể hiện mã đang hoạt động và được cập nhật để hoạt động với IE.

Here is a working jsFiddle thể hiện mã đang hoạt động và được cập nhật để hoạt động với IE và FireFox. Xem this post để biết thêm chi tiết về sự cần thiết của những thay đổi.

Answer 2

có thể có một cái nhìn để

How to disable scrolling temporarily?

Đây là một mẫu phải dừng lại và kích hoạt cuộn