क्रोम पर पेज की चौड़ाई तक एड-अप से स्क्रॉल-बार को रोकें

Question

मेरे पास क्रोम पर एक सुसंगत चौड़ाई पर अपने .html पृष्ठों को रखने की कोशिश करने वाला एक छोटा सा मुद्दा है, उदाहरण के लिए मेरे पास एक पृष्ठ (1) है जिसमें बहुत सारी सामग्री है जो व्यूपोर्ट की (सही शब्द?) ऊँचाई को पार कर जाती है, इसलिए एक ऊर्ध्वाधर स्क्रॉल-बार है? उस पृष्ठ पर (1)। पृष्ठ पर (2) मेरे पास एक ही लेआउट (मेनू, डिव, ... आदि) है, लेकिन कम सामग्री है, इसलिए वहां कोई ऊर्ध्वाधर स्क्रॉल-बार नहीं है।

समस्या यह है कि पेज (1) पर स्क्रॉल-बार तत्वों को बाईं ओर थोड़ा सा पुश करने के लिए लगता है (चौड़ाई को जोड़कर?) जबकि सब कुछ पेज (2) पर अच्छी तरह से केंद्रित प्रतीत होता है

मैं अभी भी एचटीएमएल / सीएसएस / जेएस पर एक शुरुआत कर रहा हूं, और मुझे पूरा यकीन है कि यह इतना मुश्किल नहीं है, लेकिन मेरे पास समाधान का कोई अनुमान नहीं था। यह IE10, और फ़ायरफ़ॉक्स (गैर-हस्तक्षेप करने वाले स्क्रॉल-बार) के अनुसार काम करता है, मैंने केवल क्रोम पर इसका सामना किया।

Answer 1

आप स्क्रॉलबार आकार प्राप्त कर सकते हैं और फिर कंटेनर में मार्जिन लागू कर सकते हैं।

कुछ इस तरह:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

H- स्क्रॉलबार हटाने के लिए CSS:

body{
    overflow-x:hidden;
}

इस पर एक नज़र डालने की कोशिश करें: http://jsfiddle.net/NQAzt/

Comments

चतुर समाधान, मैं हालांकि 'अगर' में हालत समझ में नहीं आता!

— ऐसमादे

स्क्रॉलहाइट किसी तत्व की कुल ऊंचाई है। आप क्या देखते हैं और क्या छिपा है। एक उदाहरण: आपकी खिड़की ऊंचाई में 500px की तरह है, शरीर में 900px के लिए एक सामग्री है। 500px दिखाया गया है लेकिन अन्य 400px छिपा हुआ है और स्क्रॉल बार इस रीमेकिंग पिक्सेल को दिखाने के लिए दिखाई देगा। तो स्थिति "जैसी है यदि सभी सामग्री की ऊंचाई अधिक है तो दृष्टिकोण ऊंचाई, शरीर में मार्जिन जोड़ें"। मेरे बुरे अंग्रेजी के लिए खेद है

— Lwyrn

मुझे यह अब मिल गया है, स्पष्ट स्पष्टीकरण के लिए धन्यवाद, मैंने इस समाधान की कोशिश की और एक अतिरिक्त क्षैतिज स्क्रॉल-बार प्राप्त किया, हालांकि पता नहीं क्यों।

— ऐसामद

मैंने उत्तर में इसे रोकने के लिए css का एक छोटा सा टुकड़ा जोड़ा है :)

— Lwyrn

यह समाधान स्क्रॉलिंग को अक्षम करता है

— हिमस्खलन 1

Answer 2

अस्वीकरण : ओवरले को हटा दिया गया है ।
आप अभी भी इसका उपयोग कर सकते हैं यदि आपको पूरी तरह से करना है, लेकिन कोशिश करें कि नहीं।

यह केवल WebKit ब्राउज़र पर काम करता है , लेकिन मुझे यह बहुत पसंद है। autoअन्य ब्राउज़रों की तरह व्यवहार करेंगे ।

.yourContent{
   overflow-y: overlay;
}

इससे स्क्रॉलबार केवल ओवरले के रूप में दिखाई देगा , इस प्रकार आपके तत्व की चौड़ाई को प्रभावित नहीं करेगा !

Comments

यह IE11 के लिए काम नहीं कर रहा है। क्या IE में काम करने के लिए ओवरले मूल्य के लिए कोई काम है।

— अनवेश रेड्डी

जहाँ तक मुझे नहीं पता, आपको IE में इस धागे में प्रस्तावित अन्य विकल्पों के साथ करना होगा

— simonDos

बहुत आवश्यकता है! मुझे यह देखने में आधे घंटे से अधिक का समय लगा कि मैंने अपने मार्कअप के साथ क्या गलत किया। मैंने किन शैलियों का उपयोग किया? यह भी डिफ़ॉल्ट होना चाहिए।

— कुशाल्वम

लेकिन इसे हटा दिया गया है

— आकाश येलप्पा

मैंने उस प्रतिबिंबित करने के लिए समाधान को अद्यतन किया। किंडा उदास: पी

— सिमोनडोस

Answer 3

आपको बस इतना करना है:

html {
    overflow-y: scroll;
}

आपकी सीएसएस फ़ाइल में क्योंकि इसमें घुमक्कड़ होगा कि इसकी आवश्यकता है या नहीं, हालांकि आप अभी स्क्रॉल नहीं कर पाएंगे

इसका मतलब है कि व्यूपोर्ट की चौड़ाई दोनों के लिए समान होगी

Comments

इसलिए, मैं दोनों को स्क्रॉल-बार जोड़ने के लिए बाध्य हूं? वहाँ सिर्फ ऊर्ध्वाधर स्क्रॉल पट्टी की चौड़ाई की अनदेखी करने के लिए एक रास्ता नहीं है? धन्यवाद !

— Acemad

थेरर इसे नजरअंदाज करने का कोई तरीका नहीं है कि मैं इसके बारे में जानता हूं, लेकिन मैंने जो कहा वह एक इलाज का काम करता है @ Rockr90

— Hive7

@ d3c0y यह सच है और मैंने उत्तर में इसका उल्लेख किया है लेकिन ऐसा करने की इसकी सबसे आसान विधि है। मुझे नहीं पता कि पिछले 3 वर्षों में यह बदल गया है या नहीं

— Hive7

@aks। यह ब्राउज़र को यह सोचने के लिए मजबूर करता है कि आप स्क्रॉल कर सकते हैं इसलिए स्क्रॉलबार को सक्षम करता है और स्क्रॉल वाई साइड स्क्रोलर है

— Hive7

ओवरफ्लो-वाई: स्क्रॉल; स्क्रॉलबार को सभी व्यूपोर्ट में जोड़ / दिखाएगा यहां तक ​​कि स्क्रॉल करने योग्य तत्व भी नहीं हैं।

— अभिलाष

Answer 4

शायद

html {
    width: 100vw;
}

बस वही है जो आप चाहते हैं।

Comments

यह मेरे usecase के लिए बहुत अच्छा काम करता है: gist.github.com/bmcminn/1ab50da18bde75f39bc88e8292a5a847 मैं calc()मुख्य सामग्री दृश्य की चौड़ाई निर्धारित करने के लिए उपयोग कर रहा हूं ताकि फिक्स्ड ऑफस्क्रीन नेवी डेस्कटॉप पर स्क्रीन के बाईं ओर कब्जा कर सकें, जबकि सभी देशी को संरक्षित करते हुए। मोबाइल पर स्क्रॉल करें।

— bmcminn

मैं पिछले 36 घंटों से अपने स्क्रॉलबार के साथ गड़बड़ कर रहा हूं। मेरे पास कुछ अलग समाधान हैं जिन्होंने काम किया, लेकिन अन्य मुद्दों को उठाया। यह पहला समाधान है जो दोनों काम करता है और मुझे कहीं और एक सामान्य स्क्रॉलबार का उपयोग करने की अनुमति देता है। धन्यवाद।

— कोषेर

आपका स्वागत है! लेकिन साथ चारों ओर खिलवाड़ htmlकी चौड़ाई में vwएक सा है hacky , इसलिए कुछ सावधानी बरतें कृपया!

— न्यूरोट्रांसमीटर

यह बहुत अच्छा काम किया, क्या कोई समझा सकता है कि यह कैसे काम करता है?

— ज़ीउस

समाधान बुरा नहीं है, लेकिन यह क्षैतिज स्क्रॉलिंग जोड़ सकता है।

— एफडिस्क

Answer 5

सफारी और क्रोम जैसे वेबकिट ब्राउज़र चौड़ाई की गणना करते समय स्क्रॉल पृष्ठ की चौड़ाई को दृश्य पृष्ठ चौड़ाई से घटाते हैं: 100% या 100vw। पर अधिक डीएम रदरफोर्ड के स्क्रॉल और पृष्ठ चौड़ाई ।

overflow-y: overlayइसके बजाय प्रयोग करके देखें ।

Comments

कृपया कई प्रश्नों के समान उत्तर न दें। एक अच्छा उत्तर पोस्ट करें, फिर डुप्लिकेट के रूप में अन्य प्रश्नों को बंद करने के लिए वोट / ध्वज दें। यदि प्रश्न डुप्लिकेट नहीं है, तो प्रश्न के अपने उत्तरों को दर्जी करें।

— पॉल राउब

यह काम करना चाहिए, लेकिन ओवरले अभी तक मानक नहीं है और न ही यह सभी ब्राउज़रों में समर्थित है।

— जिया उल रहमान मुगल

त्वरित हिचकी: सफारी में इस पृष्ठ को स्क्रॉल को रोकने के लिए कारण

— joshfindit

Answer 6

मैंने पाया कि मैं जोड़ सकता हूं

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

सीधे मेरी सीएसएस पर और यह स्क्रॉलबार को अदृश्य बना देगा, लेकिन फिर भी मुझे स्क्रॉल करने की अनुमति देगा (कम से कम क्रोम पर)। जब आप अपने पृष्ठ पर एक विचलित स्क्रॉलबार नहीं चाहते हैं तो अच्छा है!

Comments

यह कुछ हद तक जोखिम भरा है और पार ब्राउज़र समाधान है, हालांकि stackoverflow.com/questions/9251354/...

— एलेक्स Pyzhianov

Answer 7

एक निश्चित चौड़ाई वाले कंटेनरों के लिए एक शुद्ध सीएसएस क्रॉस ब्राउज़र समाधान दूसरे कंटेनर में लपेटकर और दोनों डिवीजनों पर समान चौड़ाई को लागू करके पूरा किया जा सकता है।

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

कोडपेन पर एक उदाहरण देखने के लिए यहां क्लिक करें

Answer 8

ऐसा नहीं लगता कि मेरा दूसरा जवाब फिलहाल सही काम कर रहा है (लेकिन मैं इसे चालू करने की कोशिश जारी रखूंगा)।

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

यह EXAMPLE उस लक्ष्य को प्राप्त करने का एक अधिक सुरक्षित तरीका दिखाता है, जो कि widthब्राउज़र के माध्यम से करने के लिए ब्राउज़र को प्राप्त करने की कोशिश करने के बजाय हार्डकॉडिंग एस द्वारा करता है padding।
यदि यह संभव है तो यह सबसे सरल उपाय है यदि आप एक स्थायी स्क्रॉलबार नहीं चाहते हैं।

Comments

यह एक अच्छा समाधान है, हालांकि मैं बूटस्ट्रैप का उपयोग करके एक उत्तरदायी वेबसाइट पर काम कर रहा हूं, और यह चौड़ाई और सभी को स्वचालित करने के लिए महत्वपूर्ण है, आप क्या कहते हैं?

— Acemad

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

— हैशबोर्न

Answer 9

_{संपादित करें: यह उत्तर इस समय बिल्कुल सही नहीं है, मेरे अन्य उत्तर को देखें कि मैं यहां क्या करने का प्रयास कर रहा था। मैं इसे ठीक करने की कोशिश कर रहा हूं, लेकिन अगर आप टिप्पणियों में सहायता की पेशकश कर सकते हैं, तो धन्यवाद!}

उपयोग padding-rightकरने से स्क्रॉलबार की अचानक उपस्थिति कम हो जाएगी

उदाहरण

जैसा कि आप डॉट्स से देख सकते हैं, पाठ लपेटने से पहले पृष्ठ में एक ही बिंदु पर बनाता है, चाहे वह स्क्रॉलबार मौजूद हो या न हो।
इसका कारण यह है कि जब एक स्क्रॉलबार पेश किया जाता है तो पैडिंग उसके पीछे छिप जाती है, इसलिए स्क्रॉलबार टेक्स्ट पर जोर नहीं डालता है!

Comments

स्क्रॉलबार की चौड़ाई बदल सकती है यह इस बात पर निर्भर करता है कि आप किस ओएस और ब्राउज़र का उपयोग कर रहे हैं। यह 20px और साथ ही

— 40px

अच्छी तरह से आप सभी संभावित मूल्यों का अधिकतम उपयोग करेंगे

— हैशब्रोएन

कुछ उपकरणों / OS ब्राउज़र के स्क्रॉल में चौड़ाई भी नहीं होती है।

— सेर्गेई Goliney

Answer 10

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

जहां 300 px मेरे संवाद विंडो की चौड़ाई का आधा है।

यह वास्तव में केवल एक चीज है जो मेरे लिए काम करती है।

Answer 11

मेरे पास क्रोम पर एक ही मुद्दा था। यह केवल मेरे लिए हुआ जब स्क्रॉल बार हमेशा दिखाई देता है। (सामान्य सेटिंग्स में पाया गया) मेरे पास एक मोडल है और जब मैं मोडल खोलता हूं तो मैंने देखा कि ...

body {
    padding-left: 15px;
}

शरीर में जोड़ा जाता है। मुझे ऐसा करने से रोकने के लिए

body {
    padding-left: 0px !important;
}

Answer 12

मैं पहले उत्तर के लिए टिप्पणी नहीं जोड़ सकता हूं और यह एक लंबा समय रहा है ... लेकिन उस डेमो में एक समस्या है:

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

b.prop ('स्क्रॉलहाइट') हमेशा b.height () के बराबर होता है,

मुझे लगता है कि यह इस तरह होना चाहिए:

if(b.prop('scrollHeight')>window.innerHeight) ...

अंत में मैं एक विधि सुझाता हूं:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}