स्क्रॉलिंग चाइल्ड डि विंडो को स्क्रॉल करता है, मैं इसे कैसे रोकूं?

Question 1

मेरे पास एक div है, एक स्क्रॉल बार के साथ, जब यह अंत तक पहुंचता है, तो मेरा पृष्ठ स्क्रॉल करना शुरू कर देता है। वैसे भी क्या मैं इस व्यवहार को रोक सकता हूं?

Question 2

आप कुछ ऐसा करके पूरे पृष्ठ की स्क्रॉलिंग को निष्क्रिय कर सकते हैं:

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

Question 3

समाधान मिल गया।

http://jsbin.com/itajok

यह वही है जो मुझे चाहिए था।

और यह कोड है।

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

एक jQuery प्लग-इन का उपयोग करता है।

पदावनति सूचना के कारण अद्यतन

से jQuery-माउसव्हील :

तीन तर्कों (जोड़ने के पुराने व्यवहार 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;
});

डेमो

Question 4

चयनित समाधान कला का एक काम है। सोचा कि यह एक प्लगइन के योग्य है ...।

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

यह मेरे लिए चल रही असुविधा है और मैंने देखा है अन्य हैक की तुलना में यह समाधान बहुत साफ है। यह जानने के लिए उत्सुक है कि यह कैसे काम करता है और इसका व्यापक रूप से समर्थन कैसे किया जाएगा, लेकिन जीवन और जो कोई भी मूल रूप से इसके लिए आता है। BTW - स्टैकओवरफ़्लो उत्तर संपादक को इसकी आवश्यकता है!

अपडेट करें

मेरा मानना है कि यह बेहतर है कि यह डोम में हेरफेर करने की कोशिश नहीं करता है, केवल सशर्त रूप से बुदबुदाहट को रोकता है ...

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

क्रोम में महान काम करता है और अन्य समाधानों की तुलना में बहुत सरल है ... मुझे पता है कि यह कहीं और किराए पर कैसे ...

बेला

Question 5

आप फिर से सक्रिय करने के लिए बॉडी स्क्रॉलबार और फिर माउसआउट इवेंट को अक्षम करने के लिए 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';
}

Question 6

यहां 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});

Question 7

मैंने इस मुद्दे को हल करने के लिए लिखा था

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

Question 8

यदि मैं आपके प्रश्न को सही ढंग से समझता हूं, तो आप माउस को खत्म होने पर मुख्य सामग्री को स्क्रॉल करने से रोकना चाहते हैं (आइए साइडबार कहते हैं)। उसके लिए, साइडबार मुख्य सामग्री (जो ब्राउज़र विंडो थी) के स्क्रॉल कंटेनर का एक बच्चा नहीं हो सकता है, जिससे स्क्रॉल इवेंट को उसके माता-पिता को बुदबुदाते हुए रोका जा सके।

संभवतः इसके लिए निम्नलिखित तरीके से कुछ मार्कअप परिवर्तनों की आवश्यकता होती है:

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

देखें कि यह इस नमूना फ़िडल में काम कर रहा है और तुलना करें कि इस सैंपल फ़िडल के साथ जो साइडबार का थोड़ा अलग माउस छोड़ता है।

ब्राउज़र के मुख्य स्क्रॉलबार के साथ केवल एक विशेष div स्क्रॉल करें देखें ।

Question 9

जैसा कि यहां बताया गया है , अधिकांश आधुनिक ब्राउज़र अब overscroll-behavior: none;CSS संपत्ति का समर्थन करते हैं, जो स्क्रॉल चाइनिंग को रोकता है। और वह यह है, बस एक लाइन!

Question 10

यदि आप चयनकर्ता तत्व दर्ज करते हैं तो यह विंडो पर स्क्रॉल को अक्षम करता है। आकर्षण की तरह काम करता है।

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

Question 11

आप कुछ ऐसा करके पूरे पृष्ठ की स्क्रॉलिंग को निष्क्रिय कर सकते हैं लेकिन स्क्रॉलबार को प्रदर्शित कर सकते हैं!

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

Question 12

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

Question 13

सीड के जवाब के आधार पर, यहां एक संस्करण है जो घोंसले को स्क्रॉल करने वाले तत्वों की अनुमति देता है। केवल वह तत्व जो माउस खत्म हो गया है, स्क्रॉल करेगा, और यह काफी आसानी से स्क्रॉल करता है। यह संस्करण फिर से प्रवेश भी है। यह एक ही तत्व पर कई बार उपयोग किया जा सकता है और हैंडलर को सही ढंग से हटा और पुनः स्थापित करेगा।

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()उन्हें संरक्षित करने के लिए उपयोग करें।

Question 14

यदि आप एक overflow: hiddenशैली लागू करते हैं तो इसे दूर जाना चाहिए

संपादित करें: वास्तव में मैंने आपके प्रश्न को गलत पढ़ा है, जो केवल स्क्रॉल बार को छिपाएगा, लेकिन मुझे नहीं लगता कि आप वही देख रहे हैं जो आप देख रहे हैं।

Question 15

मुझे क्रोम और फ़ायरफ़ॉक्स में काम करने का कोई जवाब नहीं मिला, इसलिए मैं इस समामेलन के साथ आया:

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