Menggulir div anak akan menggulung jendela, bagaimana cara menghentikannya?

Saya memiliki div, dengan bilah gulir, Ketika mencapai akhir, halaman saya mulai bergulir. Apakah ada cara untuk menghentikan perilaku ini?

Anda dapat menonaktifkan pengguliran seluruh halaman dengan melakukan sesuatu seperti ini:

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

Menemukan solusinya.

http://jsbin.com/itajok

Inilah yang saya butuhkan.

Dan inilah kodenya.

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

Menggunakan Plug-in jQuery.

Pembaruan karena pemberitahuan penghentian

Dari jquery-mousewheel :

Perilaku lama menambahkan tiga argumen ( delta,, deltaXdan deltaY) ke event handler sekarang tidak digunakan lagi dan akan dihapus di rilis selanjutnya.

Lalu, event.deltaYsekarang harus digunakan:

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;
});

Demo

Solusi yang dipilih adalah karya seni. Pikir itu layak untuk sebuah 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();
        });
};    

Ini merupakan ketidaknyamanan yang berkelanjutan bagi saya dan solusi ini sangat bersih dibandingkan dengan peretasan lain yang pernah saya lihat. Penasaran untuk mengetahui lebih banyak tentang cara kerjanya dan seberapa luas dukungannya, tetapi bersoraklah untuk Jeevan dan siapa pun yang awalnya muncul dengan ini. BTW - editor jawaban stackoverflow membutuhkan ini!

MEMPERBARUI

Saya percaya ini lebih baik karena tidak mencoba memanipulasi DOM sama sekali, hanya mencegah gelembung bersyarat ...

$.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);
      }
    })
  ;
};    

Berfungsi hebat di krom dan jauh lebih sederhana daripada solusi lain ... beri tahu saya bagaimana tarifnya di tempat lain ...

BIOLA

Anda dapat menggunakan peristiwa gerakan mouse pada div untuk menonaktifkan bilah gulir tubuh dan kemudian peristiwa mouseout untuk mengaktifkannya lagi?

Misalnya HTML

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

Dan kemudian javascript seperti ini:

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

Berikut cara lintas-browser untuk melakukan ini pada sumbu Y, ini berfungsi di desktop dan seluler. Diuji di OSX dan 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});

Saya menulis penyelesaian untuk masalah ini

  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);

Jika saya memahami pertanyaan Anda dengan benar, maka Anda ingin mencegah pengguliran konten utama saat mouse berada di atas div (katakanlah bilah sisi). Untuk itu, sidebar mungkin bukan anak dari wadah pengguliran konten utama (yang merupakan jendela peramban), untuk mencegah acara gulir menggelembung ke induknya.

Ini mungkin memerlukan beberapa perubahan markup dengan cara berikut:

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

Lihat cara kerjanya pada contoh biola ini dan bandingkan dengan biola contoh ini yang memiliki perilaku cuti mouse yang sedikit berbeda pada bilah sisi.

Lihat juga scroll hanya satu div tertentu dengan scrollbar utama browser .

Seperti yang dijawab di sini , sebagian besar browser modern sekarang mendukung overscroll-behavior: none;properti CSS, yang mencegah rantai gulir. Dan hanya itu, hanya satu baris!

ini menonaktifkan pengguliran di jendela jika Anda memasukkan elemen pemilih. bekerja seperti jimat.

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");
});

Anda dapat menonaktifkan pengguliran seluruh halaman dengan melakukan hal seperti ini tetapi menampilkan bilah gulir!

<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();
  }
});

Berdasarkan jawaban ceed, berikut adalah versi yang memungkinkan pengguliran bersarang elemen yang dilindungi. Hanya elemen di atas mouse yang akan menggulir, dan menggulir dengan cukup lancar. Versi ini juga peserta ulang. Ini dapat digunakan beberapa kali pada elemen yang sama dan akan dengan benar melepas dan memasang ulang penangan.

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");
        });
};

Salah satu cara mudah untuk menggunakan adalah dengan menambahkan kelas, seperti scroll-guard, ke semua elemen di halaman yang Anda izinkan untuk menggulir. Lalu gunakan $('.scroll-guard').scrollGuard()untuk menjaganya.

Jika Anda menerapkan overflow: hiddengaya, gaya itu akan hilang

edit: sebenarnya saya salah membaca pertanyaan Anda, itu hanya akan menyembunyikan bilah gulir tetapi menurut saya bukan itu yang Anda cari.

Saya tidak bisa mendapatkan jawaban apa pun untuk berfungsi di Chrome dan Firefox, jadi saya membuat penggabungan ini:

$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;
        }
    }
}