การเลื่อน div ลูกเลื่อนหน้าต่างฉันจะหยุดได้อย่างไร

ฉันมี div พร้อมแถบเลื่อนเมื่อถึงจุดสิ้นสุดหน้าของฉันจะเริ่มเลื่อน ฉันจะหยุดพฤติกรรมนี้ได้หรือไม่?

คุณสามารถปิดใช้งานการเลื่อนของทั้งหน้าได้โดยทำดังนี้:

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

พบวิธีแก้ปัญหา

http://jsbin.com/itajok

นี่คือสิ่งที่ฉันต้องการ

และนี่คือรหัส

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

ใช้ jQuery Plug-in

อัปเดตเนื่องจากการแจ้งเตือนการเลิกใช้งาน

จากjquery-mousewheel :

พฤติกรรมเก่าของการเพิ่มอาร์กิวเมนต์สามตัว ( delta, deltaXและdeltaY) ไปยังตัวจัดการเหตุการณ์ถูกเลิกใช้งานแล้วและจะถูกลบออกในภายหลัง

จากนั้นevent.deltaYตอนนี้ต้องใช้:

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

การสาธิต

โซลูชันที่เลือกคืองานศิลปะ คิดว่ามันคุ้มค่ากับปลั๊กอิน ....

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

นี่เป็นความไม่สะดวกอย่างต่อเนื่องสำหรับฉันและโซลูชันนี้สะอาดมากเมื่อเทียบกับแฮ็กอื่น ๆ ที่ฉันเคยเห็น อยากรู้ว่ามันทำงานอย่างไรและจะได้รับการสนับสนุนอย่างกว้างขวางแค่ไหน แต่ขอเชียร์ Jeevan และใครก็ตามที่คิดเรื่องนี้ BTW - โปรแกรมแก้ไขคำตอบ stackoverflow ต้องการสิ่งนี้!

อัปเดต

ฉันเชื่อว่าสิ่งนี้ดีกว่าที่จะไม่พยายามจัดการ DOM เลยเพียง แต่ป้องกันการเกิดฟองตามเงื่อนไข ...

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

ใช้งานได้ดีใน Chrome และง่ายกว่าโซลูชันอื่น ๆ มาก ... แจ้งให้เราทราบว่าค่าโดยสารที่อื่นเป็นอย่างไร ...

ซอ

คุณสามารถใช้เหตุการณ์การวางเมาส์บน div เพื่อปิดใช้งานแถบเลื่อนเนื้อหาจากนั้นเหตุการณ์เมาส์เอาท์เพื่อเปิดใช้งานอีกครั้ง?

เช่น HTML

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

แล้วจาวาสคริปต์ก็เป็นเช่นนั้น:

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

ต่อไปนี้เป็นวิธีข้ามเบราว์เซอร์ในแกน Y ซึ่งใช้ได้ทั้งบนเดสก์ท็อปและมือถือ ทดสอบบน OSX และ 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});

ฉันเขียนว่าแก้ไขปัญหานี้แล้ว

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

ตามคำตอบที่นี่เบราว์เซอร์ที่ทันสมัยส่วนใหญ่รองรับoverscroll-behavior: none;คุณสมบัติ CSS ซึ่งป้องกันไม่ให้มีการเลื่อนโซ่ เพียงแค่บรรทัดเดียวเท่านั้น!

ถ้าฉันเข้าใจคำถามของคุณอย่างถูกต้องคุณจะต้องป้องกันไม่ให้เลื่อนเนื้อหาหลักเมื่อเมาส์อยู่เหนือ div (สมมติว่าเป็นแถบด้านข้าง) ด้วยเหตุนี้แถบด้านข้างอาจไม่ใช่ลูกของคอนเทนเนอร์การเลื่อนของเนื้อหาหลัก (ซึ่งก็คือหน้าต่างเบราว์เซอร์) เพื่อป้องกันไม่ให้เหตุการณ์การเลื่อนไหลไปที่ระดับบนสุด

อาจต้องมีการเปลี่ยนแปลงมาร์กอัปบางอย่างในลักษณะต่อไปนี้:

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

ดูว่ามันใช้งานได้ในซอตัวอย่างนี้และเปรียบเทียบกับซอตัวอย่างนี้ซึ่งมีพฤติกรรมการปล่อยเมาส์ที่แตกต่างกันเล็กน้อยของแถบด้านข้าง

ดูเพิ่มเติมเลื่อนเพียงหนึ่ง div โดยเฉพาะอย่างยิ่งกับการเลื่อนหลักเบราว์เซอร์

สิ่งนี้จะปิดใช้งานการเลื่อนบนหน้าต่างหากคุณเข้าสู่องค์ประกอบตัวเลือก ทำงานเหมือนเสน่ห์

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

คุณสามารถปิดการใช้งานการเลื่อนของทั้งหน้าได้โดยทำสิ่งนี้ แต่แสดงแถบเลื่อน!

<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 นี่คือเวอร์ชันที่อนุญาตให้มีองค์ประกอบที่มีการป้องกันการเลื่อนซ้อนกัน เฉพาะองค์ประกอบที่เมาส์อยู่เท่านั้นที่จะเลื่อนและเลื่อนได้ค่อนข้างราบรื่น เวอร์ชันนี้ยังมีผู้เข้าร่วมอีกครั้ง สามารถใช้หลายครั้งในองค์ประกอบเดียวกันและจะลบและติดตั้งเครื่องจัดการใหม่อย่างถูกต้อง

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

วิธีใช้ง่ายๆวิธีหนึ่งคือเพิ่มคลาสเช่นscroll-guardองค์ประกอบทั้งหมดในหน้าที่คุณอนุญาตให้เลื่อนได้ แล้วใช้$('.scroll-guard').scrollGuard()เพื่อป้องกันพวกเขา

หากคุณใช้overflow: hiddenสไตล์มันควรจะหายไป

แก้ไข: ที่จริงฉันอ่านคำถามของคุณผิดซึ่งจะซ่อนเฉพาะแถบเลื่อน แต่ฉันไม่คิดว่านั่นคือสิ่งที่คุณกำลังมองหา

ฉันไม่ได้รับคำตอบใด ๆ ในการทำงานใน Chrome และ Firefox ดังนั้นฉันจึงได้ทำการควบรวมนี้:

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