ब्राउज़र को लंबवत और क्षैतिज स्क्रॉलबार अक्षम करें

117

क्या jQuery या जावास्क्रिप्ट का उपयोग करके ब्राउज़र को लंबवत और क्षैतिज स्क्रॉलबार अक्षम करना संभव है?

javascript jquery

मुझे लगता है कि कुछ स्थितियों में विशेष रूप से यदि आप स्क्रॉल के बीच टॉगल करना चाहते हैं और कोई स्क्रॉल नहीं है तो यह समाधान अधिक बेहतर है: stackoverflow.com/questions/8701754/…

— Yousef Salimpour

आप इस सवाल का एक और पूरा जवाब यहां देख सकते हैं stackoverflow.com/a/25561646/1922144

— davidcondrey

144

मामले में आपको स्क्रॉलबार को गतिशील रूप से छिपाने और दिखाने की संभावना है, जिसका आप उपयोग कर सकते हैं

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

तथा

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

अपने कोड में कहीं

— अलेक्जेंडर प्रोकोफयेव
स्रोत

4

छिपा हुआ अतिप्रवाह हमेशा IE में काम नहीं करता है। नीचे देखें एंथनीवजोन जवाब।

— टियागो अल्मेडा

4

oveflow: hiddenस्मार्टफ़ोन पर कुछ भी नहीं रोका जाएगा।

— डीवील्डन

क्रोम में, यह स्क्रॉलबार को छिपाए बिना इसे निष्क्रिय कर देता है (यह अभी भी है और अभी भी बाकी चीजों के आकार को बदल रहा है, लेकिन अब इसका

— ग्रे

121

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

— Lyncee
स्रोत

5

दो अपवित्र केवल शुद्ध जावास्क्रिप्ट उत्तर होने के लिए उल्लेखनीय रूप से कम हैं।

— Fzs2

2

@HermannIngjaldsson: ओपी को जावास्क्रिप्ट या jQuery समाधान के लिए कहा और 4 साल पहले एक jQuery समाधान स्वीकार कर लिया था यह केवल समझ में आता है। मैं यह नहीं कह रहा हूं कि उत्तर अच्छा नहीं है, केवल कम वोटों के बारे में स्पष्ट होना। वैसे भी मुझसे +1।

— नोप

यह एकमात्र समाधान है जो मेरे लिए काम करता है, क्योंकि शरीर छिपा हुआ अतिप्रवाह पूरे दस्तावेज़ पर हमला नहीं करता है, यह इस समस्या का सही समाधान है! बहुत बहुत धन्यवाद, आपने मुझे बहुत समय बचाया!

— अदनान।

यह एक शानदार समाधान है और एक उत्थान के योग्य है। यह फिक्स्ड सीएसएस के साथ समस्या को भी हल करता है, जहां पृष्ठ शीर्ष पर स्क्रॉल किया जाएगा।

— haipham23

50

सीएसएस की कोशिश करो

<body style="overflow: hidden">

— रे लू
स्रोत

15

ब्राउज़र संगतता के लिए मैं इस शैली को HTML टैग में भी जोड़ूंगा: html, बॉडी {अतिप्रवाह: छिपा हुआ;}

— Ady

32

अब तक हमारे पास अतिप्रवाह है: शरीर पर छिपा हुआ। हालांकि IE हमेशा यह सम्मान नहीं करता है और आपको HTML तत्व के रूप में अच्छी तरह से और साथ ही / या स्थान अतिप्रवाह: शरीर तत्व पर स्क्रॉल = "नहीं" डालने की आवश्यकता है।

आप इसे आगे ले जा सकते हैं जब आपको उस दृश्य पोर्ट का 'नियंत्रण' करने की आवश्यकता होती है जो आप यह कर सकते हैं: -

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

एक तत्व को शरीर में 100% ऊंचाई दी गई है, खिड़की के व्यूपोर्ट की पूरी ऊँचाई है, और नीचे स्थित तत्व का पूरी तरह से उपयोग किया गया है: nnPX को विंडो के निचले किनारे से ऊपर nn पिक्सेल सेट किया जाएगा, आदि।

— AnthonyWJones
स्रोत

2

शरीर सीएसएस में ',' होना चाहिए '?'

— पेनेस्ट्राइक

12

सीएसएस की कोशिश करो।

यदि आप क्षैतिज निकालना चाहते हैं

overflow-x: hidden;

और अगर आप वर्टिकल हटाना चाहते हैं

overflow-y: hidden;

— Shafraz
स्रोत

10

IE (IE10 और ऊपर) के आधुनिक संस्करणों में, स्क्रॉलबार्स को -ms-overflow-styleसंपत्ति का उपयोग करके छिपाया जा सकता है ।

html {
     -ms-overflow-style: none;
}

क्रोम में, स्क्रॉलबार को स्टाइल किया जा सकता है:

::-webkit-scrollbar {
    display: none;
}

यदि आप किसी वेब एप्लिकेशन में 'डिफ़ॉल्ट' बॉडी स्क्रॉलिंग का उपयोग करना चाहते हैं, तो यह बहुत उपयोगी है, जो इससे काफी तेज है overflow-y: scroll।

— Lg102
स्रोत

केवल यह मेरे लिए सभी उत्तरों से काम किया है :) धन्यवाद!

— गेदमिनस

9

मामले में आपको इंटरनेट एक्सप्लोरर 6 के लिए भी समर्थन की आवश्यकता है, बस html को ओवरफ्लो करें

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

तथा

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

— Gawin
स्रोत

5

IE में स्क्रॉलबार्स के साथ कुछ बग है। इसलिए यदि आप दोनों में से किसी एक को चाहते हैं, तो आपको क्षैतिज स्क्रॉलबार छिपाने के लिए निम्नलिखित को शामिल करना होगा:

overflow-x: hidden;
overflow-y:scroll;

और ऊर्ध्वाधर छिपाने के लिए:

overflow-y: hidden;
overflow-x: scroll;

— जीशान अली
स्रोत

4

(मैं अभी तक टिप्पणी नहीं कर सकता, लेकिन यह साझा करना चाहता था):

Lyncee के कोड ने डेस्कटॉप ब्राउजर में मेरे लिए काम किया। हालाँकि, iPad (Chrome, iOS 9) पर, इसने एप्लिकेशन को क्रैश कर दिया। इसे ठीक करने के लिए, मैं बदल गया

document.documentElement.style.overflow = ...

सेवा

document.body.style.overflow = ...

जिससे मेरी समस्या हल हो गई।

— इरास्मस सेडर्नैस
स्रोत

2

क्योंकि फ़ायरफ़ॉक्स में एक तीर कुंजी शॉर्ट कट है, आप शायद <div>इसे सीएसएस शैली के साथ चारों ओर रखना चाहते हैं overflow:hidden;:।

— Qvcool
स्रोत

2

JQuery का उपयोग करके आप स्क्रॉलिंग बार को इस कोड के साथ अक्षम कर सकते हैं:

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

इसके अलावा आप इस कोड के साथ इसे फिर से सक्षम कर सकते हैं:

 $('body').unbind('mousewheel');

— gtzinos
स्रोत