Cuộn con div cuộn cửa sổ, làm cách nào để ngăn điều đó lại?

Tôi có một div, với một thanh cuộn, Khi nó đến cuối, trang của tôi bắt đầu cuộn. Có cách nào tôi có thể ngăn chặn hành vi này không?

Bạn có thể hủy kích hoạt tính năng cuộn của toàn bộ trang bằng cách làm như sau:

<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>

Đã tìm ra giải pháp.

http://jsbin.com/itajok

Đây là những gì tôi cần.

Và đây là mã.

http://jsbin.com/itajok/edit#javascript,html

Sử dụng một Trình cắm jQuery.

Cập nhật do thông báo không dùng nữa

Từ jquery-mousewheel :

Hành vi cũ của việc thêm ba đối số ( delta, deltaXvà deltaY) vào trình xử lý sự kiện hiện không được dùng nữa và sẽ bị xóa trong các bản phát hành sau.

Sau đó, event.deltaYbây giờ phải được sử dụng:

var toolbox = $('#toolbox'),
    height = toolbox.height(),
    scrollHeight = toolbox.get(0).scrollHeight;

toolbox.off("mousewheel").on("mousewheel", function (event) {
  var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
  return !blockScrolling;
});

Bản giới thiệu

Giải pháp được chọn là một tác phẩm nghệ thuật. Nghĩ rằng nó xứng đáng là một plugin ....

$.fn.scrollGuard = function() {
    return this
        .on( 'wheel', function ( e ) {
            var event = e.originalEvent;
            var d = event.wheelDelta || -event.detail;
            this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
            e.preventDefault();
        });
};    

Đây là một sự bất tiện liên tục đối với tôi và giải pháp này quá sạch so với các bản hack khác mà tôi đã thấy. Tò mò muốn biết thêm về cách nó hoạt động và nó sẽ được hỗ trợ rộng rãi như thế nào, nhưng hãy cổ vũ cho Jeevan và bất cứ ai ban đầu đã nghĩ ra điều này. BTW - trình soạn thảo câu trả lời stackoverflow cần điều này!

CẬP NHẬT

Tôi tin rằng điều này tốt hơn ở chỗ nó không cố gắng thao túng DOM, chỉ ngăn chặn sự tạo bọt có điều kiện ...

$.fn.scrollGuard2 = function() {
  return this
    .on( 'wheel', function ( e ) {
      var $this = $(this);
      if (e.originalEvent.deltaY < 0) {
        /* scrolling up */
        return ($this.scrollTop() > 0);
      } else {
        /* scrolling down */
        return ($this.scrollTop() + $this.innerHeight() < $this[0].scrollHeight);
      }
    })
  ;
};    

Hoạt động tốt trong chrome và đơn giản hơn nhiều so với các giải pháp khác ... hãy cho tôi biết nó hoạt động như thế nào ở những nơi khác ...

VĨ CẦM

Bạn có thể sử dụng sự kiện di chuột qua div để tắt thanh cuộn nội dung và sau đó là sự kiện di chuột để kích hoạt lại nó?

Ví dụ: HTML

<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();">
    content
</div>

Và sau đó javascript như vậy:

var body = document.getElementsByTagName('body')[0];
function disableBodyScroll() {
    body.style.overflowY = 'hidden';
}
function enableBodyScroll() {
    body.style.overflowY = 'auto';
}

Đây là một cách trình duyệt chéo để thực hiện việc này trên trục Y, nó hoạt động trên máy tính để bàn và thiết bị di động. Đã thử nghiệm trên OSX và iOS.

var scrollArea = this.querySelector(".scroll-area");
scrollArea.addEventListener("wheel", function() {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var deltaY = event.deltaY;
    if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
}, {passive:false});

scrollArea.addEventListener("touchstart", function(event) {
    this.previousClientY = event.touches[0].clientY;
}, {passive:false});

scrollArea.addEventListener("touchmove", function(event) {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var currentClientY = event.touches[0].clientY;
    var deltaY = this.previousClientY - currentClientY;
    if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
    this.previousClientY = currentClientY;
}, {passive:false});

Tôi đã viết giải quyết cho vấn đề này

  var div;
  div = document.getElementsByClassName('selector')[0];

  div.addEventListener('mousewheel', function(e) {
    if (div.clientHeight + div.scrollTop + e.deltaY >= div.scrollHeight) {
      e.preventDefault();
      div.scrollTop = div.scrollHeight;
    } else if (div.scrollTop + e.deltaY <= 0) {
      e.preventDefault();
      div.scrollTop = 0;
    }
  }, false);

Nếu tôi hiểu câu hỏi của bạn một cách chính xác, thì bạn muốn ngăn việc cuộn nội dung chính khi chuột qua một div (giả sử là một thanh bên). Vì vậy, thanh bên có thể không phải là phần tử con của vùng chứa cuộn của nội dung chính (vốn là cửa sổ trình duyệt), để ngăn sự kiện cuộn xảy ra với cha của nó.

Điều này có thể yêu cầu một số thay đổi đánh dấu theo cách sau:

<div id="wrapper"> 
    <div id="content"> 
    </div> 
</div> 
<div id="sidebar"> 
</div> 

Xem nó hoạt động trong fiddle mẫu này và so sánh với fiddle mẫu này có hành vi rời chuột hơi khác của thanh bên.

Xem thêm chỉ cuộn một div cụ thể với thanh cuộn chính của trình duyệt .

Như đã trả lời ở đây , hầu hết các trình duyệt hiện đại hiện nay đều hỗ trợ thuộc tính overscroll-behavior: none;CSS, ngăn chặn chuỗi cuộn. Và đó là nó, chỉ một dòng!

điều này sẽ vô hiệu hóa việc cuộn trên cửa sổ nếu bạn nhập phần tử bộ chọn. hoạt động giống như bùa.

elements = $(".selector");

elements.on('mouseenter', function() {
    window.currentScrollTop = $(window).scrollTop();
    window.currentScrollLeft = $(window).scrollTop();
    $(window).on("scroll.prevent", function() {
        $(window).scrollTop(window.currentScrollTop);
        $(window).scrollLeft(window.currentScrollLeft);
    });
});

elements.on('mouseleave', function() {
    $(window).off("scroll.prevent");
});

Bạn có thể hủy kích hoạt tính năng cuộn của toàn bộ trang bằng cách làm như thế này nhưng hãy hiển thị thanh cuộn!

<div onmouseover="document.body.style.overflow='hidden'; document.body.style.position='fixed';" onmouseout="document.body.style.overflow='auto'; document.body.style.position='relative';"></div>

$this.find('.scrollingDiv').on('mousewheel DOMMouseScroll', function (e) {
  var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;
  var scrollTop = this.scrollTop;
  if((delta < 0 && scrollTop === 0) || (delta > 0 && this.scrollHeight - this.clientHeight - scrollTop === 0)) {
    e.preventDefault();
  }
});

Dựa trên câu trả lời của ceed, đây là phiên bản cho phép lồng các phần tử được bảo vệ cuộn. Chỉ có phần tử di chuột qua sẽ cuộn, và nó cuộn khá trơn tru. Phiên bản này cũng được tham gia lại. Nó có thể được sử dụng nhiều lần trên cùng một phần tử và sẽ loại bỏ và cài đặt lại các trình xử lý một cách chính xác.

jQuery.fn.scrollGuard = function() {
    this
        .addClass('scroll-guarding')
        .off('.scrollGuard').on('mouseenter.scrollGuard', function() {
            var $g = $(this).parent().closest('.scroll-guarding');
            $g = $g.length ? $g : $(window);
            $g[0].myCst = $g.scrollTop();
            $g[0].myCsl = $g.scrollLeft();
            $g.off("scroll.prevent").on("scroll.prevent", function() {
                $g.scrollTop($g[0].myCst);
                $g.scrollLeft($g[0].myCsl);
            });
        })
        .on('mouseleave.scrollGuard', function() {
            var $g = $(this).parent().closest('.scroll-guarding');
            $g = $g.length ? $g : $(window);
            $g.off("scroll.prevent");
        });
};

Một cách dễ dàng để sử dụng là thêm một lớp, chẳng hạn như scroll-guard, vào tất cả các phần tử trong trang mà bạn cho phép cuộn trên đó. Sau đó sử dụng $('.scroll-guard').scrollGuard()để bảo vệ chúng.

Nếu bạn áp dụng một overflow: hiddenphong cách, nó sẽ biến mất

chỉnh sửa: thực ra tôi đã đọc nhầm câu hỏi của bạn, điều đó sẽ chỉ ẩn thanh cuộn nhưng tôi không nghĩ đó là những gì bạn đang tìm kiếm.

Tôi không thể nhận được bất kỳ câu trả lời nào để hoạt động trong Chrome và Firefox, vì vậy tôi đã nghĩ ra sự kết hợp này:

$someElement.on('mousewheel DOMMouseScroll', scrollProtection);

function scrollProtection(event) {
    var $this = $(this);
    event = event.originalEvent;
    var direction = (event.wheelDelta * -1) || (event.detail);
    if (direction < 0) {
        if ($this.scrollTop() <= 0) {
            return false;
        }
    } else {
        if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight) {
            return false;
        }
    }
}