Alt div kaydırıldığında pencere kaydırılır, bunu nasıl durdururum?

Kaydırma çubuğuna sahip bir div'im var, Sona geldiğinde sayfam kaymaya başlıyor. Bu davranışı durdurabileceğim bir yol var mı?

Bunun gibi bir şey yaparak tüm sayfanın kaydırılmasını devre dışı bırakabilirsiniz:

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

Çözümü buldum.

http://jsbin.com/itajok

İhtiyacım olan şey bu.

Ve bu koddur.

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

Bir jQuery Eklentisi kullanır.

Kullanımdan kaldırma bildirimi nedeniyle güncelleme

Gönderen jquery-Fare tekerleğini :

Olay işleyicisine üç bağımsız değişken ( delta, deltaXve deltaY) eklemenin eski davranışı artık kullanımdan kaldırılmıştır ve sonraki sürümlerde kaldırılacaktır.

Ardından, event.deltaYşimdi kullanılmalıdır:

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

Seçilen çözüm bir sanat eseridir. Bir eklentiye layık olduğunu düşündüm ...

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

Bu benim için devam eden bir rahatsızlık oldu ve bu çözüm, gördüğüm diğer hack'lere kıyasla çok temiz. Nasıl çalıştığını ve ne kadar geniş çapta destekleneceğini merak ediyor, ancak Jeevan'a ve bunu ilk ortaya atan kişiye şerefe. BTW - stackoverflow yanıt düzenleyicisinin buna ihtiyacı var!

GÜNCELLEME

Bunun daha iyi olduğuna inanıyorum, çünkü DOM'u hiç manipüle etmeye çalışmıyor, sadece koşullu olarak köpürmeyi engelliyor ...

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

Kromda harika çalışıyor ve diğer çözümlerden çok daha basit ... başka yerlerde nasıl çalıştığını bana bildirin ...

VAKTİNİ BOŞA HARCAMAK

Gövde kaydırma çubuğunu devre dışı bırakmak için div üzerinde bir fareyle üzerine gelme olayını ve ardından tekrar etkinleştirmek için bir fareyi çekme olayını kullanabilirsiniz.

Örneğin HTML

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

Ve sonra javascript şöyle:

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

İşte bunu Y ekseninde yapmanın çapraz tarayıcı yolu, masaüstü ve mobil cihazlarda çalışıyor. OSX ve iOS'ta test edilmiştir.

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

Bu sorunu çözmek için yazdım

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

Cevap olarak burada , en modern tarayıcılar artık destekleyen overscroll-behavior: none;CSS özelliğini, önler kaydırma zincirleme. Ve işte bu, sadece bir satır!

Sorunuzu doğru anlarsam, fare bir div'in üzerindeyken ana içeriğin kaydırılmasını önlemek istersiniz (bir kenar çubuğu diyelim). Bunun için, kaydırma olayının ana içeriğe köpürmesini önlemek için, kenar çubuğu ana içeriğin (tarayıcı penceresi olan) kaydırma konteynerinin alt öğesi olmayabilir.

Bu muhtemelen aşağıdaki şekilde bazı işaretleme değişikliklerini gerektirir:

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

Bu örnek keman üzerinde çalıştığını görün ve bunu kenar çubuğundan biraz farklı bir fare bırakma davranışına sahip olan bu örnek kemanla karşılaştırın .

Ayrıca , tarayıcının ana kaydırma çubuğuyla yalnızca belirli bir div kaydırmaya bakın .

bu, seçici elemanına girerseniz pencerede kaydırmayı devre dışı bırakır. takılar gibi çalışır.

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

Bunun gibi bir şey yaparak tüm sayfanın kaydırılmasını devre dışı bırakabilir, ancak kaydırma çubuğunu görüntüleyebilirsiniz!

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

Ceed'in cevabına göre, kaydırma korumalı öğelerin iç içe yerleştirilmesine izin veren bir sürüm burada. Yalnızca farenin üzerinde olduğu öğe kayar ve oldukça yumuşak bir şekilde kaydırılır. Bu sürüm aynı zamanda yeniden girişlidir. Aynı eleman üzerinde birden çok kez kullanılabilir ve işleyicileri doğru şekilde kaldırıp yeniden takacaktır.

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

Kullanmanın kolay bir yolu scroll-guard, sayfada kaydırmaya izin verdiğiniz tüm öğelere gibi bir sınıf eklemektir . Sonra $('.scroll-guard').scrollGuard()onları korumak için kullanın .

Bir overflow: hiddenstil uygularsanız , gitmeli

edit: aslında sorunuzu yanlış okudum, bu sadece kaydırma çubuğunu gizleyecek, ancak aradığınız şeyin bu olduğunu sanmıyorum.

Chrome ve Firefox'ta çalışmak için hiçbir cevabı alamadım, bu yüzden bu birleştirme ile geldim:

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