अस्थायी रूप से स्क्रॉलिंग को अक्षम कैसे करें?

Question

मैं स्क्रोल्टो jQuery प्लगइन का उपयोग कर रहा हूं और यह जानना चाहूंगा कि क्या जावास्क्रिप्ट के माध्यम से विंडो तत्व पर अस्थायी रूप से स्क्रॉल को अक्षम करना संभव है? स्क्रॉल करने को अक्षम करने का कारण यह है कि जब आप स्क्रॉल करते समय स्क्रॉल करते हैं, तो यह बहुत ही बदसूरत हो जाता है;)

बेशक, मैं एक कर सकता था $("body").css("overflow", "hidden");और फिर एनीमेशन बंद होने पर इसे ऑटो में वापस रख सकता था, लेकिन स्क्रॉलबार अभी भी निष्क्रिय या निष्क्रिय होने पर बेहतर होगा।

Comments

यदि यह अभी भी दिख रहा है, तो उपयोगकर्ता को यह सोचने के लिए प्रशिक्षित किया जाता है कि यह कार्य करना होगा। यदि खुराक नहीं चलती है या खुराक प्रतिक्रिया नहीं करती है, तो यह उपयोगकर्ताओं के मानसिक मॉडल को तोड़ देगा कि आप कैसे काम करते हैं और परिणाम भ्रम में हैं। मैं बस एनीमेशन के दौरान स्क्रॉलिंग से निपटने का एक बेहतर तरीका ढूंढूंगा, जैसे कि एनीमेशन को रोकना।

— मार्कस व्हाट्सब्रो

एक अन्य समाधान: stackoverflow.com/questions/9280258/…

— gdbj

Answer 1

scrollघटना को रद्द नहीं किया जा सकता। लेकिन आप इन इंटरैक्शन इवेंट्स को रद्द करके ऐसा कर सकते हैं :
माउस और टच स्क्रॉल और स्क्रॉल से जुड़े बटन ।

[ कार्य डेमो ]

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
    get: function () { supportsPassive = true; } 
  }));
} catch(e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// call this to Disable
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
  window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 
  window.removeEventListener('touchmove', preventDefault, wheelOpt);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

अपडेट: निष्क्रिय श्रोताओं के साथ क्रोम डेस्कटॉप और आधुनिक मोबाइल ब्राउज़र

Comments

इस जाल में फंसे अन्य देवों के लिए युक्ति: सुनिश्चित करें कि आप किसी भी और सभी 'e.stopPropagation ()' कॉल को हटाने के लिए अन्य jQuery के प्रयासों से स्क्रॉल करना बंद कर देते हैं, क्योंकि न केवल यह काम नहीं करता है, यह घटना को इस कोड को बुदबुदाने से रोकता है वह काम करता है। उम्मीद है कि मेरे बर्बाद 30 मिनट किसी और समय को बचाने में मदद करेंगे :)

— डिर्क वैन बर्गन

आप अक्षम कुंजी सरणी (कोड टिप्पणियों में शो) में 32 (स्थान) जोड़ सकते हैं।

— gblazex

मैं इसे हमेशा की तरह स्क्रॉल कर सकता हूं: मध्य बटन प्रेस का उपयोग करना और माउस ले जाना ... इसलिए यह चाल मेरे जैसे उपयोगकर्ताओं को प्रभावित नहीं करेगी;)

— डेनिस वी

स्क्रॉलबार अक्षम नहीं है।

— verism

क्रोम पर यह अब काम नहीं करता है

— PerrierCitror

Answer 2

इसे शरीर पर एक वर्ग जोड़कर करें:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

IE, FF, Safari और Chrome में परीक्षण किए गए स्क्रॉलिंग को पुन: सक्षम करने के लिए इच्छित वर्ग को जोड़ें, तब निकालें।

$('body').addClass('stop-scrolling')

---

के लिए मोबाइल उपकरणों , आप को संभाल करने की आवश्यकता होगी touchmoveघटना:

$('body').bind('touchmove', function(e){e.preventDefault()})

और स्क्रॉलिंग को फिर से सक्षम करने के लिए अनबाइंड करें। IOS6 और Android 2.3.3 में परीक्षण किया गया

$('body').unbind('touchmove')

Comments

समझ गया! आपको touchmoveघटना को संभालना है , जैसे कि $('body').bind('touchmove', function(e){e.preventDefault()})। इस उत्तर को इस मोबाइल समाधान को शामिल करने के लिए संपादित किया गया।

— मुसिकनिमल

कूल, बस यह सुनिश्चित करना है कि टच डिवाइस के लिए कोई भी आंतरिक स्क्रॉल मोडल में काम कर सकता है। केवल मोडल के नीचे एक ओवरले कर सकता है और शरीर के बजाय ओवरले पर डिफ़ॉल्ट टचमोव को रोक सकता है।

— होलोडोम

जब यह समाधान काम करता है, तो पृष्ठ के शीर्ष पर वापस स्क्रॉल करने का (संभावित) अवांछनीय प्रभाव होता है।

— मैट

यह मेरे लिए तब तक काम नहीं आया जब तक कि मेरा चयनकर्ता नहीं था$('body,html')

— पिकयूरपोइसन

यह समाधान काम करता है लेकिन स्क्रॉल बार गायब हो जाता है और एक 'टक्कर' प्रभाव (विंडो ओएस के तहत) बनाते हैं जब आप इस वर्ग को शरीर पर लागू करते हैं (उदाहरण के लिए)

— जॉर्जियो

Answer 3

यहाँ यह करने के लिए एक बहुत ही बुनियादी तरीका है:

window.onscroll = function () { window.scrollTo(0, 0); };

यह IE6 में उछल कूद की तरह है।

Comments

वास्तव में अक्षम नहीं है, स्क्रॉल के प्रयास के दौरान डिफ़ॉल्ट रूप से अधिक स्नैप।

— मार्कस Whybrow

@Marcus जितना अच्छा है वह एक ऐसी घटना के साथ होने वाला है जो रद्द करने योग्य नहीं है।

— सलीडीहसीरहक

भले ही यह इसे असली के लिए अक्षम नहीं करता है, यह इसे अनुकरण करता है और यह मेरे लिए काफी अच्छा है।

— क्रिस बियर

IMHO - यहाँ सबसे अच्छा जवाब। इसके अलावा, आपको इसे लॉक करने की ज़रूरत नहीं है (0, 0), बस वर्तमान स्क्रॉल स्थिति का उपयोग करें।

— यमसाल्ट

लेकिन हम इसे कैसे फिर से लागू करते हैं?

— साइबरनेट

Answer 4

निम्नलिखित समाधान बुनियादी लेकिन शुद्ध जावास्क्रिप्ट (कोई jQuery) है:

function disableScrolling(){
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
}

function enableScrolling(){
    window.onscroll=function(){};
}

Comments

सफारी 7.1 और IE 11 में उछल। नवीनतम क्रोम, फ़ायरफ़ॉक्स, ओपेरा ठीक है।

— तिमो काश्कोनेन

अभी भी नवीनतम क्रोम पर एक छोटा सा उछल

— जेसन अल्शॉर्न

ठीक काम कर रहा है, सफारी में, क्रोम, लेकिन IE में चंचल

— भुवन अरोरा

यदि यह समाधान कुछ ब्राउज़र के लिए काम नहीं करता है, तो वह ब्राउज़र समस्या है

— Oto Shavadze

जैसा कि एक अन्य उत्तर में उल्लेख किया गया है, scroll-behavior: smoothयह बोर्क्स है। इसके अलावा, मैं ओटो से असहमत हूं कि यह ब्राउज़र की गलती है। आप मूल रूप से यह मान रहे हैं कि कुछ तब होगा जब वास्तविकता में यह अतुल्यकालिक हो

— मैट फ्लेचर

Answer 5

यह समाधान वर्तमान स्क्रॉल स्थिति बनाए रखेगा जबकि स्क्रॉलिंग अक्षम है, कुछ के विपरीत जो उपयोगकर्ता को शीर्ष पर वापस ले जाता है।

यह गैलाम्बालाज़ के उत्तर पर आधारित है , लेकिन स्पर्श उपकरणों के लिए समर्थन के साथ, और jquery क्लिप टॉपर के साथ एक ही वस्तु के रूप में रिफैक्ट किया गया है ।

यहां डेमो करें।

यहाँ गितूब पर।

/**
 * $.disablescroll
 * Author: Josh Harrison - aloof.co
 *
 * Disables scroll events from mousewheels, touchmoves and keypresses.
 * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride!
 */

;(function($) {

    "use strict";

    var instance, proto;

    function UserScrollDisabler($container, options) {
        // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
        // left: 37, up: 38, right: 39, down: 40
        this.opts = $.extend({
            handleKeys : true,
            scrollEventKeys : [32, 33, 34, 35, 36, 37, 38, 39, 40]
        }, options);

        this.$container = $container;
        this.$document = $(document);
        this.lockToScrollPos = [0, 0];

        this.disable();
    }

    proto = UserScrollDisabler.prototype;

    proto.disable = function() {
        var t = this;

        t.lockToScrollPos = [
            t.$container.scrollLeft(),
            t.$container.scrollTop()
        ];

        t.$container.on(
            "mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll",
            t._handleWheel
        );

        t.$container.on("scroll.disablescroll", function() {
            t._handleScrollbar.call(t);
        });

        if(t.opts.handleKeys) {
            t.$document.on("keydown.disablescroll", function(event) {
                t._handleKeydown.call(t, event);
            });
        }
    };

    proto.undo = function() {
        var t = this;
        t.$container.off(".disablescroll");
        if(t.opts.handleKeys) {
            t.$document.off(".disablescroll");
        }
    };

    proto._handleWheel = function(event) {
        event.preventDefault();
    };

    proto._handleScrollbar = function() {
        this.$container.scrollLeft(this.lockToScrollPos[0]);
        this.$container.scrollTop(this.lockToScrollPos[1]);
    };

    proto._handleKeydown = function(event) {
        for (var i = 0; i < this.opts.scrollEventKeys.length; i++) {
            if (event.keyCode === this.opts.scrollEventKeys[i]) {
                event.preventDefault();
                return;
            }
        }
    };


    // Plugin wrapper for object
    $.fn.disablescroll = function(method) {

        // If calling for the first time, instantiate the object and save
        // reference. The plugin can therefore only be instantiated once per
        // page. You can pass options object in through the method parameter.
        if( ! instance && (typeof method === "object" || ! method)) {
            instance = new UserScrollDisabler(this, method);
        }

        // Instance already created, and a method is being explicitly called,
        // e.g. .disablescroll('undo');
        else if(instance && instance[method]) {
            instance[method].call(instance);
        }

    };

    // Global access
    window.UserScrollDisabler = UserScrollDisabler;

})(jQuery);

Comments

खुशी है कि यह उपयोगी है। NB मैंने इसे jQuery प्लगइन प्रारूप में एक लिंक के साथ संपादित किया है ।

— जोश हैरिसन

अगर

— विकलांग

@ user1672694, यह यहाँ क्रोम में काम करता है। आपका ब्राउज़र क्या है और आपने किस डेमो पेज पर बग पाया है? कंसोल में कोई JS त्रुटियाँ?

— जोश हैरिसन

Chrome (38, विंडोज 7) पर, मैं अभी भी मध्य-बटन को क्लिक करके और फिर नीचे खींचकर स्क्रॉल कर सकता हूं।

— सेठी

कृपया अवहेलना करें, मैंने पाया कि बाइंडिंग mousewheelने एक आकर्षण का काम किया

— adamj

Answer 6

मुझे एक पुरानी पोस्ट का जवाब देने के लिए खेद है, लेकिन मैं एक समाधान ढूंढ रहा था और इस सवाल पर आया।

इस समस्या के लिए अभी भी कई वर्कअराउंड हैं, स्क्रॉलबार प्रदर्शित करने के लिए, जैसे कंटेनर को 100% ऊंचाई देना और overflow-y: scrollस्टाइल करना।

मेरे मामले में मैंने सिर्फ एक स्क्रॉलबार के साथ एक div बनाया है जिसे मैं overflow: hiddenशरीर में जोड़ते समय प्रदर्शित करता हूं :

function disableScroll() {
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

तत्व स्क्रॉलबार में यह शैलियाँ होनी चाहिए:

overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;

यह एक ग्रे स्क्रॉलबार दिखाता है, आशा है कि यह भविष्य के आगंतुकों को मदद करता है।

Answer 7

मैं इस समस्या के समाधान की तलाश में था, लेकिन उपरोक्त समाधानों में से किसी से भी संतुष्ट नहीं था ( जैसा कि यह उत्तर लिख रहा है), इसलिए मैं इस समाधान के साथ आया हूं।

सीएसएस

.scrollDisabled {   
    position: fixed;
    margin-top: 0;// override by JS to use acc to curr $(window).scrollTop()
    width: 100%;
}

जे एस

var y_offsetWhenScrollDisabled=0;

function disableScrollOnBody(){
    y_offsetWhenScrollDisabled= $(window).scrollTop();
    $('body').addClass('scrollDisabled').css('margin-top', -y_offsetWhenScrollDisabled);
}
function enableScrollOnBody(){
    $('body').removeClass('scrollDisabled').css('margin-top', 0);
    $(window).scrollTop(y_offsetWhenScrollDisabled);
}

Comments

मैं यह मेरे लिए काम किया है, तो मैं जोड़ा पाया overflow-y: scrollकरने के लिए .scrollDisabledशैली। अन्यथा, हर बार स्क्रॉलबार छिपने के कारण थोड़ा उछाल आया। बेशक, यह केवल मेरे लिए ही काम करता है क्योंकि मेरे पेज को सबसे बड़े डिस्प्ले पर भी स्क्रॉलबार की जरूरत है।

— एंड्रयू माइनर

Answer 8

गैलाम्बालाज़ पोस्ट के अनुसार मैं स्पर्श उपकरणों के लिए समर्थन जोड़ूंगा , हमें स्पर्श करने की अनुमति देगा लेकिन ऊपर या नीचे कोई स्क्रॉल नहीं:

function disable_scroll() {
   ...
   document.ontouchmove = function(e){ 
        e.preventDefault(); 
   }
}

function enable_scroll() {
   ...
   document.ontouchmove = function(e){ 
     return true; 
   }
}

Comments

क्या आप सुनिश्चित हैं कि यह एक उत्तर है, अन्य उत्तर की टिप्पणी नहीं है?

— इवानH

Answer 9

Chrome 56 और अन्य आधुनिक ब्राउज़र के रूप में, आपको काम passive:falseकरने के लिए addEventListenerकॉल में जोड़ना होगा preventDefault। इसलिए मैं मोबाइल पर स्क्रॉलिंग को रोकने के लिए इसका उपयोग करता हूं:

function preventDefault(e){
    e.preventDefault();
}

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}

Answer 10

नहीं, मैं इवेंट हैंडलिंग के साथ नहीं जाऊंगा क्योंकि:

• सभी घटनाओं को शरीर तक पहुंचने की गारंटी नहीं है,

• पाठ का चयन करना और नीचे की ओर बढ़ना वास्तव में दस्तावेज़ को स्क्रॉल करता है,

• अगर ईवेंट के चरण में sth की गलत स्थिति हो जाती है तो आप बर्बाद हो जाते हैं।

मैंने एक छिपे हुए textarea के साथ एक कॉपी-पेस्ट क्रिया करके इसे काट लिया है और अनुमान लगाता हूं कि, जब भी मैं प्रतिलिपि बनाता हूं तो पृष्ठ स्क्रॉल करता है क्योंकि आंतरिक रूप से मुझे कॉल करने से पहले textarea का चयन करना होगा document.execCommand('copy')।

वैसे भी मैं जाता हूँ, नोटिस setTimeout():

document.body.setAttribute('style','overflow:hidden;');
// do your thing...
setTimeout(function(){document.body.setAttribute('style','overflow:visible;');}, 500);

एक चमकती चमक मौजूद है क्योंकि स्क्रॉलबार पल-पल में गायब हो जाते हैं लेकिन यह मुझे स्वीकार्य है।

Answer 11

हटाए गए स्क्रॉल के साथ आप जो प्राप्त करना चाहते हैं उसके आधार पर आप उस तत्व को ठीक कर सकते हैं जिसे आप स्क्रॉल से हटाना चाहते हैं (क्लिक पर, या जो भी अन्य ट्रिगर आप अस्थायी रूप से स्क्रॉल को निष्क्रिय करना चाहते हैं)

मैं एक "अस्थायी कोई स्क्रॉल" समाधान के लिए और मेरी आवश्यकताओं के लिए खोज रहा था, इसने इसे हल किया

एक वर्ग बनाओ

.fixed{
    position: fixed;
}

फिर Jquery के साथ

var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from

contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class

//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){

    if(contentContainer.hasClass('notfixed')){
        contentContainer.removeClass('notfixed').addClass('fixed');

    }else if(contentContainer.hasClass('fixed')){
        contentContainer.removeClass('fixed').addClass('notfixed');
    };
});

मैंने पाया कि यह एक सरल पर्याप्त समाधान था जो सभी ब्राउज़रों पर अच्छा काम करता है, और पोर्टेबल उपकरणों (यानी आईफ़ोन, टैबलेट आदि) पर सरल उपयोग के लिए भी बनाता है। चूंकि तत्व अस्थायी रूप से तय किया गया है, कोई स्क्रॉल नहीं है :)

ध्यान दें! अपने "contentContainer" तत्व की नियुक्ति के आधार पर आपको इसे बाईं ओर से समायोजित करने की आवश्यकता हो सकती है। निश्चित वर्ग के सक्रिय होने पर आसानी से उस तत्व में एक css बायां मान जोड़कर किया जा सकता है

contentContainer.css({
    'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it's only pushed from one side)
});

Answer 12

एक और समाधान:

body {
    overflow-y: scroll;
    width: 100%;
    margin: 0 auto;
}

इस तरह आपके पास हमेशा एक लंबवत स्क्रॉलबार होता है, लेकिन जैसा कि मेरी अधिकांश सामग्री व्यूपोर्ट से अधिक लंबी है, यह मेरे लिए ठीक है। सामग्री एक अलग div के साथ केंद्रित है, लेकिन शरीर में फिर से मार्जिन सेट किए बिना मेरी सामग्री बाईं ओर रहेगी।

ये दो फ़ंक्शन हैं जिनका उपयोग मैं अपना पॉपअप / मोडल दिखाने के लिए करता हूं:

var popup_bodyTop = 0;
var popup_bodyLeft = 0;

function popupShow(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');

    // remember current scroll-position
    // because when setting/unsetting position: fixed to body
    // the body would scroll to 0,0
    popup_bodyLeft = $(document).scrollLeft();
    popup_bodyTop  = $(document).scrollTop();

    // invert position
    var x = - popup_bodyLeft;
    var y = - popup_bodyTop;

    $('body').css('position', 'fixed');
    $('body').css('top', y.toString() +'px');
    $('body').css('left', x.toString() +'px');
}

function popupHide(id)
{
    $('#'+ id).effect('fade');
    $('#popup-overlay').effect('fade');
    $('body').css('position', '');
    $('html, body').scrollTop(popup_bodyTop);
    $('html, body').scrollLeft(popup_bodyLeft);
}

परिणाम: बाएं स्क्रॉलबार के कारण गैर स्क्रॉल करने योग्य पृष्ठभूमि और सामग्री की पुन: स्थिति नहीं। वर्तमान एफएफ, क्रोम और आईई 10 के साथ परीक्षण किया गया।

Comments

यह मेरे लिए और स्थिति का उपयोग करने के बाद शीर्ष पर स्क्रॉल करने की समस्या के लिए काम करता है: निश्चित। धन्यवाद!

— एनिया मार्टिनेज

Answer 13

इस बारे में कैसा है? (यदि आप jQuery का उपयोग कर रहे हैं)

var $window = $(window);
var $body = $(window.document.body);

window.onscroll = function() {
    var overlay = $body.children(".ui-widget-overlay").first();

    // Check if the overlay is visible and restore the previous scroll state
    if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};

Comments

थोड़ा उछलता है, लेकिन यह IE 7 के लिए काम करता है (क्लाइंट इसका उपयोग करता है)। अन्य समाधान नहीं है।

— निकी बी

Answer 14

मैं showModalDialog का उपयोग कर रहा हूं , द्वितीयक पृष्ठ को मोडल संवाद के रूप में दिखाने के लिए।

मुख्य विंडो स्क्रॉलबार छिपाने के लिए:

document.body.style.overflow = "hidden";

और मोडल डायलॉग को बंद करते समय, मुख्य विंडो स्क्रॉलबार दिखाते हुए:

document.body.style.overflow = "scroll";

संवाद से मुख्य विंडो में तत्वों तक पहुँचने के लिए:

parent.document.getElementById('dialog-close').click();

बस किसी के बारे में दिखाने के लिए खोजमोडालडायलॉग : (मूल कोड की लाइन 29 के बाद)

document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
    e.preventDefault();
    document.body.style.overflow = "scroll";//****
    dialog.close();
});

Comments

यह मेरे लिए रिएक्ट में काम करता है जहाँ jQuery मौजूद नहीं है और जहाँ React के पास बॉडी टैग की स्थिति को प्रबंधित करने के लिए पहुँच नहीं है।

— जॉन

Answer 15

स्वीकृत उत्तर में ईवेंट का रद्द करना मेरे विचार में एक भयानक तरीका है: /

इसके बजाय मैंने position: fixed; top: -scrollTop();नीचे इस्तेमाल किया ।

डेमो: https://jsfiddle.net/w9w9hthy/5/

मेरे jQuery पॉपअप प्रोजेक्ट से: https://github.com/seahorsepip/jPopup

//Freeze page content scrolling
function freeze() {
    if($("html").css("position") != "fixed") {
        var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
        if(window.innerWidth > $("html").width()) {
            $("html").css("overflow-y", "scroll");
        }
        $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
    }
}

//Unfreeze page content scrolling
function unfreeze() {
    if($("html").css("position") == "fixed") {
        $("html").css("position", "static");
        $("html, body").scrollTop(-parseInt($("html").css("top")));
        $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
    }
}

यह कोड विचार में चौड़ाई, ऊंचाई, स्क्रॉलबार और पेजजंप मुद्दों को लेता है।

उपरोक्त कोड के साथ हल किए गए संभावित मुद्दे:

• चौड़ाई, जब स्थिति निर्धारित html तत्व की चौड़ाई छोटी हो सकती है तो 100%
• ऊंचाई, ऊपर के समान
• स्क्रॉलबार, जब स्थिति सेट करने पर पृष्ठ सामग्री नहीं रह जाती है, तो स्क्रॉलबार तब भी होता है, जब एक क्षैतिज पेजjump में परिणामस्वरूप स्क्रॉलबार पहले होता था
• पेजजंप, जब स्थिति सेट करने पर पृष्ठ स्क्रॉलपॉप अब लंबवत पेजजंप के परिणामस्वरूप प्रभावी नहीं है

यदि किसी के पास पेज फ्रीज / अनफ्रीज कोड के ऊपर कोई सुधार है तो मुझे बताएं ताकि मैं उन सुधारों को अपनी परियोजना में जोड़ सकूं।

Answer 16

var winX = null, winY = null;
window.addEventListener('scroll', function () {
    if (winX !== null && winY !== null) {
        window.scrollTo(winX, winY);
    }
});
function disableWindowScroll() {
    winX = window.scrollX;
    winY = window.scrollY;
};
function enableWindowScroll() {
    winX = null;
    winY = null;
};

Comments

यह यहां का सबसे अच्छा समाधान है।

— जफंक

@ जफंक सहमत, सरल और संक्षिप्त, छोटे कोड, सही। धन्यवाद

— फ्लोरेंट Roques

Answer 17

मेरे पास एक ही समस्या है, नीचे जिस तरह से मैं इसे संभाल रहा हूं।

/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");

/* file.css */
.no-scroll{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

उममीद है कि इससे मदद मिलेगी।

Answer 18

चेयेन फोर्ब्स के जवाब पर बिल्डिंग, और एक मैं यहाँ के माध्यम से पाया fcalderan: बस अक्षम स्क्रॉल यह छिपा नहीं? और स्क्रॉलबार के हॉलोडोम के गायब होने के मुद्दे को ठीक करने के लिए

सीएसएस:

.preventscroll{
    position: fixed;
    overflow-y:scroll;
}

जे एस:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

यह कोड आपको पृष्ठ के शीर्ष पर कूदता है, लेकिन मुझे लगता है कि fcalderan के कोड में वर्कअराउंड है।

Answer 19

मुझे पता है कि यह एक पुराना प्रश्न है, लेकिन मुझे कुछ ऐसा ही करना था, और कुछ समय बाद एक उत्तर की तलाश में और विभिन्न तरीकों की कोशिश करते हुए, मैंने एक बहुत ही आसान समाधान का उपयोग करके समाप्त किया।

मेरी समस्या बहुत समान थी, लगभग समान थी, एकमात्र अंतर यह है कि मुझे वास्तव में स्क्रॉल बार दिखाने की ज़रूरत नहीं थी - मुझे बस यह सुनिश्चित करना था कि इसकी चौड़ाई अभी भी उपयोग की जाएगी, इसलिए मेरे ओवरले प्रदर्शित होने पर पृष्ठ की चौड़ाई नहीं बदलेगी ।

जब मैं स्क्रीन पर अपना ओवरले स्लाइड करना शुरू करता हूं, तो मैं करता हूं:

$('body').addClass('stop-scrolling').css('margin-right', 8);

और मैं स्क्रीन पर अपना ओवरले बंद करने के बाद मैं करता हूँ:

$('body').removeClass('stop-scrolling').css('margin-right', 0);

महत्वपूर्ण: यह पूरी तरह से काम करता है क्योंकि मेरा ओवरले तैनात है absolute, right: 0pxजब visible।

Answer 20

सबसे सरल विधि है:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

इसे पूर्ववत करने के लिए:

$("body").css("overflow", "auto");

लागू करने के लिए आसान है, लेकिन केवल नकारात्मक पक्ष है:

• यदि यह केंद्र-संरेखित (क्षैतिज रूप से) है तो पृष्ठ बाईं ओर थोड़ा सा कूद जाएगा।

यह स्क्रॉल बार हटाए जाने के कारण है, और व्यूपोर्ट थोड़ा चौड़ा हो रहा है।

Comments

वह स्क्रॉल स्थिति को रीसेट कर देगा

— एंजेल डेविड कैल्डेरो पैसिओट

@AngelDavidCalderaroPacciott नहीं, स्क्रॉल स्थिति समान ऊंचाई / दूरी रहेगी।

— दैन

@ यह क्रोम पर स्क्रॉल स्थिति को रीसेट करता है

— टॉम

@ क्या मैंने अभी इसकी जाँच की है, यह केवल कुछ अवसरों पर करता है (जब शरीर की ऊँचाई अपने बच्चों के सापेक्ष नहीं होती है)। कृपया इसके बजाय बदलने bodyका प्रयास करें html।

— दान

मुझे यकीन है कि आपने Iphone कारण में अपने समाधान की जांच overflow:hiddenनहीं की है, वहां काम नहीं करता है

— शूवो

Answer 21

यहाँ स्क्रॉल (कोई jQuery) को रोकने के लिए मेरा समाधान है। साइड मेनू दिखाई देने पर मैं स्क्रॉल को अक्षम करने के लिए इसका उपयोग करता हूं।

<button onClick="noscroll()" style="position:fixed; padding: 8px 16px;">Disable/Enable scroll</button>
<script>
var noscroll_var;
function noscroll(){
  if(noscroll_var){
    document.getElementsByTagName("html")[0].style.overflowY = "";
    document.body.style.paddingRight = "0";
    noscroll_var = false
  }else{
    document.getElementsByTagName("html")[0].setAttribute('style', 'overflow-y: hidden !important');
    document.body.style.paddingRight = "17px";
    noscroll_var = true
  }
}/*noscroll()*/
</script>

<!-- Just to fill the page -->
<script>
  for(var i=0; i <= 80; i++){
    document.write(i + "<hr>")
  }
</script>

मैंने स्क्रॉलिंग पट्टी के गायब होने की भरपाई के लिए 17px की पैडिंग-राइट लगाई। लेकिन यह भी समस्याग्रस्त है, ज्यादातर मोबाइल ब्राउज़रों के लिए। के अनुसार चौड़ाई बार हो रही द्वारा हल यह ।

सभी एक साथ इस पेन में।

Answer 22

मेरे पास टच डिवाइस पर समान मुद्दा है। तत्व को "स्पर्श-क्रिया: कोई नहीं" जोड़ना समस्या को हल करता है।

अधिक जानकारी के लिए। इसकी जांच करें:-

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Answer 23

यह अब तक का सबसे सरल उपाय है। और मुझे विश्वास है कि मैंने अन्य सभी की कोशिश की और यह सबसे आसान है। यह विंडोज उपकरणों पर बहुत अच्छा काम करता है , जो पेज को सिस्टम स्क्रॉलबार और आईओएस उपकरणों के लिए कमरे के दाईं ओर से धक्का देता है , जिन्हें ब्राउज़रों में अपने स्क्रॉलबार के लिए जगह की आवश्यकता नहीं होती है। तो इसका उपयोग करके आपको दाईं ओर पैडिंग जोड़ने की आवश्यकता नहीं है, इसलिए जब आप बॉडी के ओवरफ्लो या html को css के साथ छिपाते हैं तो पेज झिलमिलाता नहीं है ।

यदि आप इसके बारे में सोचते हैं तो समाधान बहुत सरल है। विचार यह है कि window.scrollTop () उसी समय ठीक उसी स्थिति में दिया जाए जो पॉपअप खोला जाता है। विंडो के आकार बदलने पर उस स्थिति को भी बदलें (जैसा कि स्क्रॉल स्थिति में एक बार परिवर्तन होता है)।

तो अब हम शुरू करें...

सबसे पहले वैरिएबल बनाते हैं जो आपको बताएगा कि पॉपअप खुला है और इसे स्टॉपवॉन्डशर्कॉल करें । यदि हम ऐसा नहीं करते हैं, तो आपको अपने पृष्ठ पर अपरिभाषित चर की एक त्रुटि मिलेगी और इसे 0 पर सेट करें - सक्रिय नहीं होने पर।

$(document).ready(function(){
    stopWindowScroll = 0;
});

अब आपको ओपन पॉपअप फंक्शन विच बनाने देता है आपके कोड में कोई भी फंक्शन हो सकता है जो प्लगइन या कस्टम के रूप में जो भी पॉपअप इस्तेमाल कर रहा है वह ट्रिगर हो जाए। इस मामले में यह एक साधारण कस्टम पॉपअप होगा जिसमें क्लिक फ़ंक्शन पर एक साधारण दस्तावेज़ होगा।

$(document).on('click','.open-popup', function(){
    // Saving the scroll position once opening the popup.
    stopWindowScrollPosition = $(window).scrollTop();
    // Setting the stopWindowScroll to 1 to know the popup is open.
    stopWindowScroll = 1;
    // Displaying your popup.
    $('.your-popup').fadeIn(300);
});

तो अगली चीज़ जो हम करते हैं वह है नज़दीकी पॉपअप फंक्शन, जिसे मैं फिर से दोहराता हूँ, कोई भी फंक्शन हो सकता है जो आपने पहले ही बनाया है या किसी प्लगइन में इस्तेमाल कर रहे हैं। महत्वपूर्ण बात यह है कि जब हम खुले या बंद होते हैं, तो यह जानने के लिए हमें स्टॉपविन्डस्कॉल चर को 1 या 0 पर सेट करने के लिए उन 2 कार्यों की आवश्यकता होती है ।

$(document).on('click','.open-popup', function(){
    // Setting the stopWindowScroll to 0 to know the popup is closed.
    stopWindowScroll = 0;
    // Hiding your popup
    $('.your-popup').fadeOut(300);
});

तो फिर window.scroll फंक्शन बनाने की सुविधा देता है ताकि हम एक बार स्क्रॉल को रोक सकें। ऊपर बताई गई स्टॉपवॉन्डक्रॉल को 1 पर सेट किया गया है - जो सक्रिय है।

$(window).scroll(function(){
    if(stopWindowScroll == 1) {
         // Giving the window scrollTop() function the position on which
         // the popup was opened, this way it will stay in its place.
         $(window).scrollTop(stopWindowScrollPosition);
    }
});

बस। पेज के लिए अपनी खुद की शैलियों को छोड़कर इसके लिए कोई सीएसएस आवश्यक नहीं है। यह मेरे लिए एक आकर्षण की तरह काम करता है और मुझे आशा है कि यह आपकी और दूसरों की मदद करता है।

यहाँ JSFiddle पर एक काम कर उदाहरण है:

जेएस फिडेल उदाहरण

अगर यह मदद की मुझे पता है। सादर।

Answer 24

एक वैश्विक चर में स्क्रॉल लंबाई स्टोर करें और जब आवश्यक हो इसे पुनर्स्थापित करें!

var sctollTop_length = 0;

function scroll_pause(){
  sctollTop_length = $(window).scrollTop();
  $("body").css("overflow", "hidden");
}

function scroll_resume(){
  $("body").css("overflow", "auto");
  $(window).scrollTop(sctollTop_length);
}

Answer 25

यह कोड Chrome 56 और आगे (मूल उत्तर Chrome पर अब काम नहीं करता है) पर काम करेगा।

DomUtils.enableScroll()स्क्रॉलिंग सक्षम करने के लिए उपयोग करें ।

DomUtils.disableScroll()स्क्रॉलिंग को अक्षम करने के लिए उपयोग करें ।

class DomUtils {
  // left: 37, up: 38, right: 39, down: 40,
  // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
  static keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

  static preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;
  }

  static preventDefaultForScrollKeys(e) {
    if (DomUtils.keys[e.keyCode]) {
      DomUtils.preventDefault(e);
      return false;
    }
  }

  static disableScroll() {
    document.addEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Disable scrolling in Chrome
    document.addEventListener('keydown', DomUtils.preventDefaultForScrollKeys, {
      passive: false,
    });
  }

  static enableScroll() {
    document.removeEventListener('wheel', DomUtils.preventDefault, {
      passive: false,
    }); // Enable scrolling in Chrome
    document.removeEventListener(
      'keydown',
      DomUtils.preventDefaultForScrollKeys,
      {
        passive: false,
      }
    ); // Enable scrolling in Chrome
  }
}

Answer 26

कूद को रोकने के लिए, यह वही है जो मैंने इस्तेमाल किया

export function toggleBodyScroll(disable) {
  if (!window.tempScrollTop) {
    window.tempScrollTop = window.pageYOffset; 
    // save the current position in a global variable so I can access again later

  }
  if (disable) {
    document.body.classList.add('disable-scroll');
    document.body.style.top = `-${window.tempScrollTop}px`;
  } else {
    document.body.classList.remove('disable-scroll');
    document.body.style.top = `0px`;
    window.scrollTo({top: window.tempScrollTop});
    window.tempScrollTop = 0;
  }
}

और मेरी सीएसएस में

.disable-scroll {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

Answer 27

मुझे यह उत्तर दूसरी साइट पर मिला :

स्क्रॉल अक्षम करें:

$( ".popup").live({
    popupbeforeposition: function(event, ui) {
    $("body").on("touchmove", false);
}
});

पॉपअप रिलीज़ स्क्रॉल के बाद:

$( ".popup" ).live({
    popupafterclose: function(event, ui) {
    $("body").unbind("touchmove");
}
});

Comments

यह केवल टच स्क्रॉलिंग को रोकने के लिए लगता है, लेकिन माउस स्क्रॉलिंग, एरो कीज़, पेज अप और डाउन कीज़ आदि अभी भी काम करेंगे। -1

— मार्कसवर्थ

ये 'ईवेंट' टच स्क्रॉलिंग के लिए हैं, बस आपको जो भी इवेंट्स की ज़रूरत है, उसे स्थानापन्न करें।

— पेनस्टम्प

इसके अलावा, यह कुछ अन्य विशिष्ट परिस्थितियों में उपयोग किया जाता है। popupbeforeposition? वह किसके लिए होना चाहिए? अस्थायी रूप से स्क्रॉलिंग अक्षम करने के साथ इसका क्या करना है? कम से कम इसे इस स्थिति के लिए प्रासंगिक बनाएं। ऐसा लगता है कि आपने इसे सीधे वेबसाइट से कॉपी किया है।

— markasoftware

Answer 28

galambalazs समाधान महान है! यह मेरे लिए क्रोम और फ़ायरफ़ॉक्स दोनों में पूरी तरह से काम करता था। और इसे ब्राउज़र विंडो से किसी भी डिफ़ॉल्ट घटना को रोकने के लिए बढ़ाया जा सकता है। मान लीजिए कि आप कैनवास पर एक ऐप कर रहे हैं। आप ऐसा कर सकते हैं:

var events = {
  preventDefault: function(e) {
    e = e || window.event;
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;  
  },

  //spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36,
  //left: 37, up: 38, right: 39, down: 40
  keys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
  keydown: function(e) {
    for (var i = events.keys.length; i--;) {
      if (e.keyCode === events.keys[i]) {
        events.preventDefault(e);
        return;
      }
    }
  },

  wheel: function(e) {
    events.preventDefault(e);
  },

  disable: function() {
    if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = events.wheel;
    document.onkeydown = helpers.events.keydown;
  },

  enable: function() {
    if (window.removeEventListener) {
      window.removeEventListener('DOMMouseScroll', events.wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
  }
}

और फिर अपने ऐप पर मान लें कि आप अपने स्वयं के ईवेंट को संसाधित करने जा रहे हैं, जैसे कि माउस, कीबोर्ड, टच इवेंट और इसी तरह ... आप डिफ़ॉल्ट ईवेंट को अक्षम कर सकते हैं जब माउस कैनवास के अंदर जाता है और माउस के होने पर उन्हें पुन: सक्षम करता है। बाहर चला जाता है:

function setMouseEvents(canvas) {
  var useCapture = false;

  //Mouse enter event
  canvas.addEventListener('mouseenter', function(event) {
    events.disable();
  }, useCapture);

  //Mouse leave event
  canvas.addEventListener('mouseleave', function(event) {
    events.enable();
  }, useCapture);
}

आप इस हैक के साथ राइट क्लिक मेनू को भी निष्क्रिय कर सकते हैं:

function disableRightClickMenu(canvas) {
  var my_gradient = canvas.context.createLinearGradient(0, 0, 0, 225);
  my_gradient.addColorStop(0, "white");
  my_gradient.addColorStop(1, "white");
  canvas.context.fillStyle = my_gradient;
  canvas.context.fillRect(0, 0, canvas.width, canvas.height);
  canvas.oncontextmenu = function() { return false; };
}

Answer 29

मुझे मोबाइल स्क्रीन पर समान एनीमेशन समस्या थी, लेकिन लैपटॉप पर नहीं, जब jquery के चेतन कमांड का उपयोग करके एक div को चेतन करने की कोशिश कर रहा था। इसलिए मैंने एक टाइमर का उपयोग करने का फैसला किया, जिसने खिड़की की स्क्रॉल स्थिति को इतनी बार बहाल किया कि नग्न आंखों के लिए दस्तावेज़ स्थिर दिखाई देगा। इस समाधान ने सैमसंग गैलेक्सी -2 या आईफोन -5 जैसे छोटे स्क्रीन के मोबाइल डिवाइस पर पूरी तरह से काम किया।

इस दृष्टिकोण का मुख्य तर्क : विंडो को स्क्रॉल करने की स्थिति को मूल स्क्रॉल स्थिति पर सेट करने के लिए टाइमर को चेतन कमांड से पहले शुरू किया जाना चाहिए, और फिर जब एनीमेशन पूरा हो जाता है तो हमें इस टाइमर को साफ़ करने की आवश्यकता है ( original scroll positionएनीमेशन शुरू होने से ठीक पहले की स्थिति)।

मैंने अपने सुखद आश्चर्य से पाया कि दस्तावेज़ वास्तव में एनीमेशन अवधि के दौरान स्थिर दिखाई दिया अगर टाइमर अंतराल था 1 millisecond, जो कि मैं इसके लिए लक्ष्य कर रहा था।

//get window scroll position prior to animation
//so we can keep this position during animation
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//NOTE:restoreTimer needs to be global variable
//start the restore timer
restoreTimer = setInterval(function() {
    window.scrollTo(xPosition, yPosition);
}, 1);

//animate the element emt
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //when animation completes, we stop the timer
    clearInterval(restoreTimer);
});

ANOTHER SOLUTION जिसने काम किया : स्क्रॉलिंग को सक्षम / अक्षम करने के लिए इस पोस्ट के तहत मोहम्मद अनीनी द्वारा दिए गए उत्तर के आधार पर, मैंने यह भी पाया कि नीचे दिए गए कोड का एक संशोधित संस्करण भी काम करता है।

//get current scroll position
var xPosition = window.scrollX || window.pageXOffset || document.body.scrollLeft;
var yPosition = window.scrollY || window.pageYOffset || document.body.scrollTop;

//disable scrolling
window.onscroll = function() {
    window.scrollTo(xPosition, yPosition);
};

//animate and enable scrolling when animation is completed
emt.animate({
    left: "toggle",
    top: "toggle",
    width: "toggle",
    height: "toggle"
}, 500, function() {
    //enable scrolling when animation is done
    window.onscroll = function() {};
});

Answer 30

एक सरल समाधान जो मेरे लिए काम करता था (अस्थायी रूप से विंडो स्क्रॉलिंग अक्षम करना)।

इस फिडेल के आधार पर: http://jsfiddle.net/dh834zgw/1/

निम्नलिखित स्निपेट (jquery का उपयोग करके) विंडो स्क्रॉल को अक्षम कर देगा:

 var curScrollTop = $(window).scrollTop();
 $('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');

और आपकी सीएसएस में:

html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

अब जब आप मोडल को हटाते हैं, तो html टैग पर noscroll वर्ग को हटाना न भूलें:

$('html').toggleClass('noscroll');