Làm thế nào để tắt tính năng cuộn trong các phần tử bên ngoài?

Question

Tôi có một div cuộn dọc trong một trang cũng cuộn theo chiều dọc.

Khi div con được cuộn bằng bánh xe chuột và chạm tới đầu hoặc cuối thanh cuộn, trang (nội dung) bắt đầu cuộn. Trong khi chuột nằm trên div con, tôi muốn cuộn trang (nội dung) bị khóa.

This SO post (scroll down to the selected answer) thể hiện sự cố tốt.

This SO question về cơ bản giống như của tôi, nhưng câu trả lời đã chọn làm cho nội dung trang của tôi thay đổi đáng kể theo chiều ngang khi thanh cuộn biến mất và xuất hiện trở lại.

Tôi nghĩ rằng có thể có một giải pháp thúc đẩy event.stopPropagation(), nhưng không thể nhận được bất cứ điều gì để làm việc. Trong ActionScript, loại điều này sẽ được giải quyết bằng cách đặt trình xử lý con lăn chuột trên div con gọi là stopPropagation() trên sự kiện trước khi nó đến phần tử cơ thể. Vì JS và AS là cả hai ngôn ngữ ECMAScript, tôi nghĩ khái niệm này có thể dịch, nhưng nó dường như không hoạt động.

Có giải pháp nào giúp nội dung trang của tôi không thay đổi được không? Nhiều khả năng sử dụng stopPropagation hơn là sửa CSS? Các câu trả lời của JQuery được chào đón như JS thuần túy.

Answer 1

đây là những gì tôi đã kết thúc với. rất giống với câu trả lời của @ mrtsherman here, chỉ các sự kiện JS thuần túy thay vì jQuery. tôi vẫn sử dụng jQuery để chọn và di chuyển div con xung quanh, mặc dù.

// earlier, i have code that references my child div, as childDiv 

function disableWindowScroll() { 
    if (window.addEventListener) { 
     window.addEventListener("DOMMouseScroll", onChildMouseWheel, false); 
    } 
    window.onmousewheel = document.onmousewheel = onChildMouseWheel; 
} 

function enableWindowScroll() { 
    if (window.removeEventListener) { 
     window.removeEventListener("DOMMouseScroll", onArticleMouseWheel, false); 
    } 
    window.onmousewheel = document.onmousewheel = null; 
} 

function onChildMouseWheel (event) { 
    var scrollTgt = 0; 
    event = window.event || event; 
    if (event.detail) { 
     scrollTgt = -40 * event.detail; 
    } else { 
     scrollTgt = event.wheelDeltaY; 
    } 

    if (scrollTgt) { 
     preventDefault(event); 
     $(childDiv).scrollTop($(childDiv).scrollTop() - scrollTgt); 
    } 
} 

function preventDefault (event) { 
    event = event || window.event; 
    if (event.preventDefault) { 
     event.preventDefault(); 
    } 
    event.returnValue = false; 
} 

Tôi nhận thấy việc cuộn không khớp chính xác với việc cuộn bình thường; nó dường như di chuyển nhanh hơn một chút so với không có mã này. tôi giả sử tôi có thể sửa chữa bằng cách gõ xuống wheelDeltaY một chút, nhưng đó là lẻ rằng nó sẽ được báo cáo khác nhau bởi javascript hơn nó thực sự được thực hiện bởi trình duyệt ...

Answer 2

gì về điều này:

div.onmousemove = function() { // may be onmouseover also works fine 
    document.body.style.overflow = "hidden"; 
    document.documentElement.style.overflow = "hidden"; 
}; 

div.onmouseout = function() { 
    document.body.style.overflow = "auto"; 
    document.documentElement.style.overflow = "auto"; 
}; 

Answer 3

Tôi thường làm điều đó với một hack nhỏ nghe sự kiện di chuyển trên các tài liệu: nó reset chiều cao cuộn trở lại một bản gốc - hiệu quả đóng băng các tài liệu từ cuộn nhưng bất kỳ yếu tố bên trong với overflow: auto vẫn sẽ di chuyển độc đáo:

var scrollTop = $(document).scrollTop(); 
$(document).on('scroll.scrollLock', function() { 
    $(document).scrollTop(scrollTop); 
}); 

và sau đó khi tôi đang thực hiện với sự khóa cuộn bên trong:

$(document).off('scroll.scrollLock'); 

không gian tên sự kiện .scrollLock đảm bảo rằng tôi không gây rối với bất kỳ trình xử lý sự kiện nào khác khi cuộn.

Answer 4

Mặc dù đây là một câu hỏi cũ, đây là cách tôi làm điều đó với jQuery. Điều này cho phép bạn cuộn một danh sách trong một danh sách bên ngoài, hoặc bạn có thể thay đổi danh sách bên ngoài thành tài liệu để làm những gì OP hỏi.

window.scrollLockHolder = null; 
function lockScroll(id){ 
    if (window.scrollLockHolder == null){ 
     window.scrollLockHolder = $('#' + id).scrollTop(); 
    } 
    $('#' + id).on('scroll', function(){ 
     $('#' + id).scrollTop(window.scrollLockHolder); 
    }); 
} 
function unlockScroll(id){ 
    $('#' + id).off('scroll'); 
    window.scrollLockHolder = null; 
} 

Và bạn có thể sử dụng nó như thế này:

<ul onmousemove="lockScroll('outer-scroller-id')" onmouseout="unlockScroll('outer-scroller-id')"> 
    <li>...</li> 
    <li>...</li> 
</ul>