JQuery के साथ पेज स्क्रॉलिंग को प्रोग्रामेटिक रूप से अक्षम कैसे करें

Question

JQuery का उपयोग करते हुए, मैं शरीर की स्क्रॉलिंग को अक्षम करना चाहूंगा:

मेरा विचार है:

1. सेट body{ overflow: hidden;}
2. वर्तमान पर कब्जा scrollTop();/scrollLeft()
3. बॉडी स्क्रॉल ईवेंट पर बाइंड करें, स्क्रॉल किए गए मान पर स्क्रॉलटॉप / स्क्रॉललैट सेट करें।

क्या कोई बेहतर तरीका है?

---

अपडेट करें:

कृपया मेरा उदाहरण देखें, और एक कारण है, http://jsbin.com/ikuma4/2/edit पर

मुझे पता है कि कोई सोच रहा होगा "वह सिर्फ position: fixedपैनल पर ही इस्तेमाल क्यों नहीं करता ?"।

कृपया इसका सुझाव न दें क्योंकि मेरे पास अन्य कारण हैं।

Comments

"क्या कोई बेहतर तरीका है?" - ब्राउज़र को सामान्य रूप से व्यवहार करने देने के अलावा?

— फेंटन

"भावुकतापूर्ण नाटकीय ढंग से"?

— माइक वेलर

शायद कार्यक्रम का मतलब? चूंकि यह 'प्रोग्रामिक रूप से' के लिए फ़ायरफ़ॉक्स शीर्ष वर्तनी सुधार सुझाव है

— माइकल शिमिन्स

यह धागा जा रहा है \ b \

— Cipi

@Sohnee स्क्रॉलिंग अक्षम करना! == बुरा

— मानसीमंस

Answer 1

ऐसा करने का एकमात्र तरीका जो आपने पाया है, वह आपके द्वारा वर्णित के समान है:

1. वर्तमान स्क्रॉल स्थिति को पकड़ो (क्षैतिज अक्ष को मत भूलना!)।
2. छिपा हुआ ओवरफ़्लो पर सेट करें (शायद पिछले ओवरफ़्लो मान को बनाए रखना चाहते हैं)।
3. स्क्रॉलटॉ के साथ संग्रहित स्क्रॉल स्थिति पर दस्तावेज़ स्क्रॉल करें ()।

फिर जब आप फिर से स्क्रॉल करने की अनुमति देने के लिए तैयार हों, तो वह सब पूर्ववत करें।

संपादित करें: कोई कारण नहीं कि मैं आपको कोड नहीं दे सकता क्योंकि मैं इसे खोदने के लिए मुसीबत में गया था ...

// lock scroll position, but retain settings for later
var scrollPosition = [
  self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
  self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);


// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])

Comments

कृपया jsbin.com/ikuma4/2/edit देखें और मुझे कोई कारण बताएं कि आपका बेहतर है? क्या मुझे कुछ याद आ रहा है (मैं अपने उदाहरण की तुलना में आपके उत्तर की लंबाई के लिए कोई कारण नहीं देख सकता हूं)

— हैलवुड

IE7 में आपका दृष्टिकोण काम नहीं करता है। मैंने पहले भी कोशिश की थी। समस्या यह है कि यह स्क्रॉल घटना पर तुरंत पर्याप्त प्रतिक्रिया नहीं करता है। यह दस्तावेज़ को स्क्रॉल करने देता है, फिर इसे वापस छीनता है जब आपका जेएस स्क्रॉल स्थिति को फिर से सेट करता है जहां आप इसे चाहते हैं।

— tfe

इसके अलावा, अगर शरीर के अलावा किसी और चीज का ओवरफ्लो autoहोता है, तो यह ओवरराइट हो जाएगा। मुझे मौजूदा सेटिंग को संरक्षित करने की आवश्यकता थी, ताकि कुछ ओवरहेड भी जुड़ जाए।

— तफ

क्या किसी को पता है कि क्यों बस स्टाइल htmlऔर bodyसाथ overflow: hiddenअपर्याप्त है? हमें अभी भी इवेंट हैंडलर की जरूरत है।

— kpozin

यह एक शानदार जवाब है। और इसे टच डिवाइस पर काम करने के लिए, इस उत्तर को देखें।

— पैट्रिक

Answer 2

यह स्क्रॉलिंग को पूरी तरह से अक्षम कर देगा :

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

पुन: स्थापित करने हेतु:

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

फ़ायरफ़ॉक्स और क्रोम पर इसका परीक्षण किया।

Comments

उम्मीद के मुताबिक काम करता है। धन्यवाद! यह स्वीकृत उत्तर होना चाहिए था!

— डेव चेन

अभी भी क्रोम पर मध्य माउस बटन के साथ स्क्रॉल करता है।

— लोथर

यह वर्तमान स्क्रॉल स्थिति खो देता है। ओपी ने स्क्रॉल स्थिति को कैप्चर करने के बारे में स्पष्ट रूप से उल्लेख किया है, इसलिए मुझे लगता है कि उन्हें इसकी आवश्यकता है। वैसे भी, मुझे इसकी आवश्यकता है, इसलिए यह मेरे लिए सीमित उपयोग का है

— zerm

PS height: 100%प्रभावी रूप से वर्तमान स्थिति में स्क्रॉलिंग को बिना जंपिंग के लॉक कर देता है - नवीनतम क्रोम पर, कम से कम।

— zerm

यह सही उत्तर नहीं है। स्क्रॉल स्थिति पर कब्जा नहीं किया गया है

— taylorcressy

Answer 3

इसे इस्तेमाल करे

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})

Comments

बस मैं क्या देख रहा था ... लगभग। वैसे भी इसे तीर कुंजी के दौरान अक्षम करने के लिए?

— कोडी

— @ कोडी

@cubbiu इसे रिवर्स कैसे करें?

— मीर

आप उपयोग कर सकते हैं$('#element').off('scroll touchmove mousewheel');

— arnuschky

महान समाधान। यद्यपि आप केवल bodyस्क्रॉलिंग को कैसे अक्षम करेंगे, फिर भी अन्य बाल तत्वों के भीतर स्क्रॉल करने की अनुमति है overflow: scroll?

— फ़िज़िक्स

Answer 4

मैं बस हल से थोड़ी ट्यूनिंग प्रदान करता हूं । विशेष रूप से, मैंने यह सुनिश्चित करने के लिए कुछ अतिरिक्त नियंत्रण जोड़ा कि स्क्रॉलबार के सेट होने पर पृष्ठ सामग्री (उर्फ पृष्ठ शिफ्ट ) की कोई शिफ्टिंग नहीं है hidden।

पेज स्क्रॉल को लॉक और अनलॉक करने के लिए दो जावास्क्रिप्ट फ़ंक्शंस lockScroll()और unlockScroll()क्रमशः परिभाषित किए जा सकते हैं।

function lockScroll(){
    $html = $('html'); 
    $body = $('body'); 
    var initWidth = $body.outerWidth();
    var initHeight = $body.outerHeight();

    var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    ];
    $html.data('scroll-position', scrollPosition);
    $html.data('previous-overflow', $html.css('overflow'));
    $html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);   

    var marginR = $body.outerWidth()-initWidth;
    var marginB = $body.outerHeight()-initHeight; 
    $body.css({'margin-right': marginR,'margin-bottom': marginB});
} 

function unlockScroll(){
    $html = $('html');
    $body = $('body');
    $html.css('overflow', $html.data('previous-overflow'));
    var scrollPosition = $html.data('scroll-position');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);    

    $body.css({'margin-right': 0, 'margin-bottom': 0});
}

जहां मैंने माना कि <body>कोई प्रारंभिक मार्जिन नहीं है।

ध्यान दें कि, जबकि उपरोक्त समाधान अधिकांश व्यावहारिक मामलों में काम करता है, यह निश्चित नहीं है क्योंकि इसमें पृष्ठों के लिए कुछ और अनुकूलन की आवश्यकता होती है, उदाहरण के लिए, एक हेडर position:fixed। आइए एक उदाहरण के साथ इस विशेष मामले में जाते हैं। मान लो

<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>

साथ में

#header{position:fixed; padding:0; margin:0; width:100%}

फिर, एक को कार्यों में निम्नलिखित जोड़ना चाहिए lockScroll()और unlockScroll():

function lockScroll(){
    //Omissis   


    $('#header').css('margin-right', marginR);
} 

function unlockScroll(){
    //Omissis   

    $('#header').css('margin-right', 0);
}

अंत में, मार्जिन या पैडिंग के लिए कुछ संभावित प्रारंभिक मूल्य का ध्यान रखें।

Comments

आपके जावास्क्रिप्ट $ body.css ({'मार्जिन-राइट': 0, 'मार्जिन-बॉटम', 0}) में एक त्रुटि है; $ body.css ({'मार्जिन-राइट': 0, 'मार्जिन-बॉटम': 0}) होना चाहिए;

— जोहान्सक

वास्तव में, बस का उपयोग करें marginRightऔर marginLeft:)

— Martijn

Answer 5

आप इस कोड का उपयोग कर सकते हैं:

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

Comments

आप अभी भी स्क्रॉल करने के लिए मध्य माउस बटन का उपयोग कर सकते हैं।

— रोजर सुदूर

नहीं, यह ठीक है और इसके साथ कोई स्क्रॉल नहीं है!

— mr.soroush

यदि आप कुछ अतिरिक्त सीएसएस का उपयोग करते हैं तो आप स्क्रॉलिंग को पूरी तरह से अक्षम कर सकते हैं, अधिक विवरण के लिए मेरा उत्तर देखें।

— गीताकार

Answer 6

स्क्रॉलिंग बंद करने के लिए इसे आज़माएँ:

var current = $(window).scrollTop();
$(window).scroll(function() {
    $(window).scrollTop(current);
});

दुबारा सेट करने के लिए:

$(window).off('scroll');

Comments

यह एक शानदार समाधान था जिसकी मुझे जरूरत थी।

— टेरी कार्टर

@EveryScreamer नहीं, यह स्क्रीन को पागलों की तरह हिला देता है। वर्कअराउंड खोजने की कोशिश कर रहा है।

— तेलियानी

Answer 7

मैंने इसे संभालने के लिए jQuery प्लगइन लिखा है: $ .disablescroll ।

यह इस तरह के रूप में mousewheel, touchmove, और keypress घटनाओं से स्क्रॉल करने से रोकता है Page Down।

यहाँ एक डेमो है ।

उपयोग:

$(window).disablescroll();

// To re-enable scrolling:
$(window).disablescroll("undo");

Comments

मैंने मूसव्हील / स्क्रॉल ईवेंट को सुनने के लिए स्क्रॉल करने के लिए अस्थायी रूप से अक्षम करने के लिए आपके डिसैबक्रॉल () प्लगइन का उपयोग करने की कोशिश की है, लेकिन यह काम नहीं करता है। कोई भी मौका आपको उस प्रभाव को प्राप्त करने का एक तरीका पता है?

— पीला-संत

@ जेबी मैं शायद मदद कर सकता हूं, लेकिन टिप्पणियाँ सबसे अच्छी जगह नहीं हैं। इस स्टैक ओवरफ्लो चैट में शामिल हों और मैं देखूंगा कि मैं क्या कर सकता हूं: chat.stackoverflow.com/rooms/55043/disablescroll-usage

— Josh Harrison

मुझे क्षमा करें, लेकिन यह प्लगइन आपके jsfiddle में भी काम नहीं करता है।

— अंक

आप मुझे यह बताकर निरीक्षण करने में मदद कर सकते हैं कि यह कौन सा ब्राउज़र / प्लेटफ़ॉर्म है जो कृपया काम नहीं करता है?

— जोश हैरिसन

Answer 8

आप घटनाओं को स्क्रॉल करने और इसके डिफ़ॉल्ट व्यवहार को रोकने के लिए एक फ़ंक्शन संलग्न कर सकते हैं।

var $window = $(window);

$window.on("mousewheel DOMMouseScroll", onMouseWheel);

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

https://jsfiddle.net/22cLw9em/

Comments

यह सही जवाब है। पता नहीं क्यों इसकी स्थापना के रूप में नहीं है

— Guilherme Ferreira

यह काम करता हैं। पैट्रिक के उत्तर

— Hastig Zusammenstellen

Answer 9

मध्य माउस बटन सहित स्क्रॉलिंग को अक्षम करने के लिए एक लाइनर।

$(document).scroll(function () { $(document).scrollTop(0); });

संपादित करें : वैसे भी jQuery के लिए कोई ज़रूरत नहीं है, नीचे वैनिला जेएस में ऊपर के रूप में (इसका मतलब है कि कोई रूपरेखा नहीं, बस जावास्क्रिप्ट):

document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })

this.documentElement.scrollTop - मानक

this.body.scrollTop - IE संगतता

Answer 10

• स्क्रॉल छिपाने के लिए: $("body").css("overflow", "hidden");
• स्क्रॉल पुनर्स्थापित करने के लिए: $("body").css("overflow", "initial");

Answer 11

क्या आप सिर्फ शरीर की ऊँचाई को 100% पर सेट नहीं कर सकते हैं और छिपा हुआ है? Http://jsbin.com/ikuma4/13/edit देखें

Comments

$ ("html")। सीएसएस ({ऊंचाई: '100%', अतिप्रवाह: 'छिपा हुआ'}); यह बस काम करता है, धन्यवाद एड्रियन

— एलेक्सी

Answer 12

किसी ने इस कोड को पोस्ट किया था, जिसे बहाल करने पर स्क्रॉल स्थिति को बनाए रखने की समस्या नहीं है। कारण यह है कि लोग इसे html और शरीर या केवल शरीर पर लागू करते हैं लेकिन इसे केवल html पर लागू किया जाना चाहिए इस तरह जब स्क्रॉल स्थिति को बहाल रखा जाएगा:

$('html').css({
    'overflow': 'hidden',
    'height': '100%'
});

पुन: स्थापित करने हेतु:

$('html').css({
    'overflow': 'auto',
    'height': 'auto'
});

Comments

'overflow': 'auto',उपयोग नहीं'overflow': 'initial',

— evtuhovdo

Answer 13

यह आपके उद्देश्यों के लिए काम कर सकता है या नहीं भी कर सकता है, लेकिन इसकी स्क्रॉलिंग करने से पहले आप अन्य कार्यक्षमता को आग देने के लिए jScrollPane का विस्तार कर सकते हैं । मैंने केवल इसे थोड़ा परीक्षण किया है, लेकिन मैं पुष्टि कर सकता हूं कि आप इसमें कूद सकते हैं और स्क्रॉलिंग को पूरी तरह से रोक सकते हैं। मैंने जो कुछ किया था:

• डेमो जिप डाउनलोड करें: http://github.com/vitch/jScrollPane/archives/master
• "ईवेंट" डेमो खोलें
• गैर-मिनिमाइज़ किए गए स्क्रिप्ट स्रोत का उपयोग करने के लिए इसे संपादित करें: <script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
• Jquery.jscrollpane.js के भीतर, "वापसी" डालें लाइन 666 पर (शुभ रेखा संख्या! लेकिन यदि आपका संस्करण थोड़ा अलग है, तो यह positionDragY(destY, animate)फ़ंक्शन की पहली पंक्ति है

घटनाओं को आगें। html, और आप एक सामान्य रूप से स्क्रॉल बॉक्स देखेंगे जो आपके कोडिंग हस्तक्षेप के कारण स्क्रॉल नहीं करेगा।

आप पूरे ब्राउज़र के स्क्रॉलबार को इस तरह नियंत्रित कर सकते हैं (देखें fullpage_scroll.html)।

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

यदि आप अधिक सहायता चाहते हैं, तो जहाँ आप उठें, वहां पोस्ट करें!

आशा है कि इसने मदद की है।

Answer 14

मैंने एक उत्तर दिया जो यहां मदद कर सकता है: jQuery के सिंपलमॉडल को स्क्रॉल करना अक्षम करें

यह दिखाता है कि टेक्स्ट को इधर-उधर किए बिना स्क्रॉल बार को कैसे बंद किया जाए। आप सरलता के बारे में भागों को अनदेखा कर सकते हैं।

Answer 15

यदि आप कीबोर्ड नेविगेशन के साथ स्क्रॉलिंग को अक्षम करना चाहते हैं, तो आप कीडाउन इवेंट को ओवरराइड कर सकते हैं।

$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});

Answer 16

इस कोड को आज़माएं:

    $(function() { 
        // ...

        var $body = $(document);
        $body.bind('scroll', function() {
            if ($body.scrollLeft() !== 0) {
                $body.scrollLeft(0);
            }
        });

        // ...
    });

Answer 17

आप पृष्ठ पर सामग्री की स्क्रॉलिंग को रोकने के लिए स्क्रॉल करने योग्य div के साथ विंडो को कवर कर सकते हैं। और, छुपाकर और दिखा कर, आप अपनी स्क्रॉल लॉक / अनलॉक कर सकते हैं।

कुछ इस तरह से करें:

#scrollLock {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: scroll;
    opacity: 0;
    display:none
}

#scrollLock > div {
    height: 99999px;
}

function scrollLock(){
    $('#scrollLock').scrollTop('10000').show();
}

function scrollUnlock(){
    $('#scrollLock').hide();
}

Comments

कृपया "u" और "smth" जैसे संक्षिप्ताक्षर का उपयोग न करें। पठनीयता के लिए, सही ढंग से वर्तनी के लिए समय निकालें।

— टिन मैन

Answer 18

उन लोगों के लिए, जिन्होंने लेआउट (के माध्यम से margin:0 auto;) केंद्रित किया है , यहां @tfe के प्रस्तावित समाधान position:fixedके साथ समाधान का एक मैश-अप है ।

यदि आप पृष्ठ-स्नैपिंग (स्क्रॉलबार दिखाने / छिपाने के कारण) का अनुभव कर रहे हैं, तो इस समाधान का उपयोग करें।

// lock scroll position, but retain settings for later
var scrollPosition = [
    window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
    window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var $html = $('html'); // bow to the demon known as MSIE(v7)
$html.addClass('modal-noscroll');
$html.data('scroll-position', scrollPosition);
$html.data('margin-top', $html.css('margin-top'));
$html.css('margin-top', -1 * scrollPosition[1]);

…के साथ संयुक्त…

// un-lock scroll position
var $html = $('html').removeClass('modal-noscroll');
var scrollPosition = $html.data('scroll-position');
var marginTop = $html.data('margin-top');
$html.css('margin-top', marginTop);
window.scrollTo(scrollPosition[0], scrollPosition[1])

... और अंत में, सीएसएस के लिए .modal-noscroll...

.modal-noscroll
{
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

मैं कहना है इस अन्य समाधान के किसी भी वहाँ से एक उचित समाधान के अधिक है उद्यम हैं, लेकिन मैं इसे परीक्षण नहीं किया है कि अच्छी तरह से अभी तक ...: पी

---

संपादित करें: कृपया ध्यान दें कि मेरे पास कोई सुराग नहीं है कि यह टच डिवाइस पर कितना खराब प्रदर्शन कर सकता है (पढ़ें: उड़ा दें)।

Answer 19

ऐसा करने के लिए आप DOM का भी इस्तेमाल कर सकते हैं। कहो कि आपके पास एक फ़ंक्शन है जिसे आप इस तरह कहते हैं:

function disable_scroll() {
document.body.style.overflow="hidden";
}

और यह सब वहाँ है! आशा है कि यह अन्य सभी उत्तरों के अतिरिक्त मदद करता है!

Answer 20

यह वही है जो मैंने किया:

CoffeeScript:

    $("input").focus ->
        $("html, body").css "overflow-y","hidden"
        $(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) ->
            event.preventDefault()

    $("input").blur ->
        $("html, body").css "overflow-y","auto"
        $(document).off "scroll.stopped touchmove.stopped mousewheel.stopped"

जावास्क्रिप्ट:

$("input").focus(function() {
 $("html, body").css("overflow-y", "hidden");
 $(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) {
   return event.preventDefault();
 });
});

$("input").blur(function() {
 $("html, body").css("overflow-y", "auto");
 $(document).off("scroll.stopped touchmove.stopped mousewheel.stopped");
});

Answer 21

यकीन नहीं होता अगर किसी ने मेरे समाधान की कोशिश की है। यह पूरे शरीर / html पर काम करता है, लेकिन इसमें कोई संदेह नहीं है कि यह किसी भी तत्व पर लागू किया जा सकता है जो एक स्क्रॉल ईवेंट को फायर करता है।

बस सेट और आप की जरूरत के रूप में स्क्रॉल खोलना।

var scrollLock = false;
var scrollMem = {left: 0, top: 0};

$(window).scroll(function(){
    if (scrollLock) {
        window.scrollTo(scrollMem.left, scrollMem.top);
    } else {
        scrollMem = {
            left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
            top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        };
    }
});

यहाँ उदाहरण JSFiddle है

आशा है कि यह किसी की मदद करेगा।

Comments

यह एक के रूप में यह काम करना चाहिए, एक अपवाद के साथ। जब स्क्रॉल लॉक हो जाता है, और मैं स्क्रॉल करता हूं, तो यह थोड़े छोटा हो जाता है, वास्तव में स्क्रॉल लॉक करने से पहले ...

— थॉमस टिलमैन

Answer 22

मुझे लगता है कि सबसे अच्छा और साफ समाधान है:

window.addEventListener('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y);
});

और jQuery के साथ:

$(window).on('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y)
})

उन ईवेंट श्रोता को स्क्रॉलिंग को ब्लॉक करना चाहिए। स्क्रॉलिंग को फिर से सक्षम करने के लिए बस उन्हें हटा दें