क्या स्क्रॉलबार के बिना व्यूपोर्ट चौड़ाई (vw) की गणना करना संभव है?

Question

जैसा कि शीर्षक में बताया गया है, क्या vwकेवल सीएसएस में स्क्रॉलबार के बिना गणना करना संभव है ?

उदाहरण के लिए, मेरी स्क्रीन की चौड़ाई है 1920px। vwरिटर्न 1920px, शानदार। लेकिन मेरे शरीर की वास्तविक चौड़ाई कुछ इस तरह है 1903px।

क्या मेरे लिए 1903pxकेवल सीएसएस (न केवल प्रत्यक्ष बच्चों के लिए body) के साथ मान प्राप्त करने का एक तरीका है , या मुझे इसके लिए जावास्क्रिप्ट की बिल्कुल आवश्यकता है?

Comments

लेकिन ... स्क्रॉलबार व्यूपोर्ट चौड़ाई में शामिल नहीं है !?

— डेनियल

@Danield क्षमा करें, मैंने myquestion

— मार्टन ज़ेंडर

यदि हम कुछ कृत्रिम स्क्रॉल-बार के बारे में बात कर रहे हैं, जो आप वहां डालते हैं, तो शायद आप कुछ इस तरह की तलाश कर रहे हैं: width: calc(100vw - scrollbarWidth)जहां 'स्क्रॉलबारविड' कुछ निश्चित मान है जैसे 15px

— डानिल्ड

@ डान्डिल मुझे वास्तव में एक क्रॉस ब्राउज़र फिक्स की आवश्यकता है जहां मेरे पास प्रत्येक मूल ब्राउज़र स्क्रोलर की चर चौड़ाई है

— मार्टन ज़ेंडर

मैं वर्तमान में Chrome v64 पर बूटस्ट्रैप 4 का उपयोग करते हुए एक पृष्ठ पर काम कर रहा हूं और% इनर चौड़ाई (स्क्रॉलबार सहित नहीं) है और vw बाहरी चौड़ाई (स्क्रॉलबार सहित चौड़ाई) है - इसलिए मैं vw और का उपयोग नहीं कर सकता, जैसे ओपी, मैं डॉन 'समझ में नहीं आता कि ऐसा क्यों हो रहा है।

— एरिक_B

Answer 1

ऐसा करने का एक तरीका कैल्क के साथ है। जहाँ तक मुझे पता है, 100% चौड़ाई स्क्रॉल सहित है। तो अगर तुम करते हो:

body {
  width: calc(100vw - (100vw - 100%));
}

आपको स्क्रॉलबार की चौड़ाई 100vw माइनस मिलती है।

आप इसे ऊंचाई के साथ भी कर सकते हैं, यदि आप एक वर्ग चाहते हैं जो कि उदाहरण के लिए व्यूपोर्ट का 50% है (माइनस 50% स्कोलर चौड़ाई)

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}  

Comments

यह आश्चर्यजनक है, लेकिन दुर्भाग्य से केवल तभी काम करता है जब आप जिस तत्व को साइज़ कर रहे हैं वह प्रत्यक्ष बच्चा है body, या ऐसा तत्व जिसकी चौड़ाई समान है body(अन्यथा 100%गलत तत्व की चौड़ाई को संदर्भित करेगा)। जिस स्थिति में आप बस प्रतिशत का उपयोग कर सकते हैं। जब तक मुझे कुछ याद नहीं आ रहा है?

— नटोमामी

क्या मामलों के लिए ठीक नहीं है जब स्क्रॉलबार के लिए 100vw लेखांकन वास्तव में एक समस्या है - अर्थात, जब आपको तय चौड़ाई के साथ कंटेनर में 100vw ब्लॉक लगाने की आवश्यकता होती है।

— निश्चित रूप

गणित: 100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% मुझे कुछ याद है?

— Kamil Kiełczewski

दुर्भाग्य से यह पूर्ण रूप से तैनात तत्व के लिए काम नहीं करेगा क्योंकि 100% वहां उपलब्ध नहीं है :(

— हीरोवो गोलसिक

@ टीकेओएल हर मामले में जहां उसका समाधान वास्तव में समस्या का समाधान करेगा, चौड़ाई: 50% ही काम करेगी। कामिल Kiełczewski सही है, यह समाधान बेकार है।

— एलिएजर बर्लिन

Answer 2

दस्तावेज़ लोड होने के बाद मैं CSS चर को परिभाषित करने के लिए जावास्क्रिप्ट की एक पंक्ति जोड़कर ऐसा करता हूं:

document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");

फिर सीएसएस में आप var(--scrollbar-width)विभिन्न चौड़ाई के स्क्रॉलबार्स के साथ / अलग-अलग ब्राउज़रों के लिए आवश्यक किसी भी समायोजन करने के लिए उपयोग कर सकते हैं । आप क्षैतिज स्क्रॉलबार के लिए कुछ समान कर सकते हैं, यदि आवश्यक हो, के innerWidthसाथ innerHeightऔर clientWidthसाथ की जगह clientHeight।

Comments

मेरे लिए, इस रिटर्न का आकार जरूरत से दोगुना है। कोई संकेत? मुझे 16px देता है, लेकिन 8px काफी होगा ...

— फेबियन बियरेलिन

Answer 3

चश्मे के अनुसार , व्यूपोर्ट सापेक्ष लंबाई इकाइयां स्क्रॉलबार को ध्यान में नहीं रखती हैं (और वास्तव में, मान लें कि वे मौजूद नहीं हैं)।

तो जो भी आपका इच्छित व्यवहार है, आप इन इकाइयों का उपयोग करते समय स्क्रॉलबार को ध्यान में नहीं रख सकते।

Comments

फिर, vwप्रति युक्ति, किसी भी स्क्रॉलबार की मौजूदगी के बारे में पता नहीं है। इसलिए आप उन्हें ध्यान में नहीं रख सकते।

— मदारा का भूत

स्पेक्स के अनुसार, vw स्क्रॉलबार की चौड़ाई को दूर ले जाता है, क्योंकि ऑटो पर ओवरफ्लो होता है, तो यह vw मान के लिए "हिडन" की तरह काम करता है। इसलिए यदि पृष्ठ ओवरफ्लो होना चाहिए, तो इसे "स्क्रॉल" पर सेट करें। अतिप्रवाह-एक्स और अतिप्रवाह-वाई के साथ आप कौन सा स्क्रॉलबार प्रदर्शित करना चाहते हैं।

— कुलवार

@ कुलवार ने इसे क्रोम में आज़माया, शरीर को overflow-y: scrollबनाम की स्थापना के overflow-y: autoलिए vw इकाइयों के लिए गणना मूल्य को बदलने के लिए प्रतीत नहीं होता है। विशेष रूप से मेरी साइट पर 3.82vw पर कुछ सेट है, और मेरे कंप्यूटर की चौड़ाई 1920px है। ओवरफ्लो ऑटो के साथ, 3.82vw = 73.344px, और फिर मैंने ओवरफ्लो स्क्रॉल के साथ कोशिश की, जिसमें 73.344px भी लगा है, कोई बदलाव नहीं, जब आपको सही लगे तो 72.6946px बाहर करना चाहिए

— TKoL

100% स्क्रॉलबार को ध्यान में रखते हैं, इसलिए यदि आपका मामला 100vw है, यदि आप कर सकते हैं, तो इसे 100% पर बदलें

— Jairo

Answer 4

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

यह कहा जाता है, अगर आपकी समस्या की गणना सभी ब्राउज़र में स्क्रॉलबार्स के बिना व्यूपोर्ट चौड़ाई की है, जहाँ तक मुझे पता है, एक अच्छी स्थिति यह है:

width = $('body').innerWidth();

पहले से निर्धारित:

body {
    margin:0;
}

Answer 5

vwइकाई नहीं ले करता है overflow-yको ध्यान में स्क्रॉलबार overflow-yके लिए निर्धारित है auto।

इसे बदलें overflow-y: scroll;और vwयूनिट स्क्रॉलबार के साथ व्यूपोर्ट होगा। फिर आप कैल्क () का उपयोग करके स्क्रॉल मूल्य से स्क्रॉल आकार को घटा सकते हैं। आप स्क्रॉलबार की चौड़ाई को भी परिभाषित कर सकते हैं, इसलिए यह ब्राउज़र-स्वतंत्र होगा।

केवल खाते में लेने के लिए नकारात्मक पक्ष। यदि सामग्री स्क्रीन में फिट होती है, तो स्क्रॉलबार को वैसे भी दिखाया जाता है। संभव समाधान से परिवर्तन करने के लिए है autoकरने के लिए scrollजावास्क्रिप्ट में।

Comments

क्या आपका मतलब था overflow-x?

— एलिरन मलका

यह सच नहीं है। vw यूनिट में स्क्रॉलबार शामिल हैoverflow-y: scroll;

— NoSkill

Answer 6

एक ही तरीका है कि मैंने इसे "कैल्क" के साथ अपने कोड को गड़बड़ाने के बिना काम करने के लिए पाया, कंटेनर तत्व का आकार 100vw करने के लिए है; अतिप्रवाह-एक्स के लिए कंटेनर के चारों ओर एक आवरण जोड़ना; इससे कंटेनर फुल हो जाएगा जैसे कि स्क्रॉलबार कंटेंट के ऊपर था।

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	html{ overflow-y: scroll; }
	html, body{ padding:0; margin: 0;}
	#wrapper{ overflow-x: hidden; }
	.row{ width: 100vw; }
	.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
	.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
	.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
	</style>
</head>
<body>

<div id="wrapper">
<div class="row">
	<div class="row-left"></div>
	<div class="row-right"></div>
</div>
</div>


</body>
</html>

Answer 7

यदि मामला कुछ स्लाइडर के समान था: जैसा कि कई उत्तरों में पोस्ट किया गया है, चौड़ाई 100% स्क्रॉलबार को ध्यान में नहीं रखती है, जबकि 100vw करता है। कई तत्वों के होने की स्थिति में, जिन्हें खिड़की की चौड़ाई लेने की आवश्यकता होती है और जो 100% खिड़की की चौड़ाई (या जिनकी प्राकृतिक ब्लॉक चौड़ाई ऐसी होगी) के साथ पहले से ही एक कंटेनर के अंदर नेस्टेड हैं, आप उपयोग कर सकते हैं:

• कंटेनर के लिए फ्लेक्स प्रदर्शित करें
• फ्लेक्स: 0 0 100% बाल तत्वों के लिए

Answer 8

स्क्रोलबार के साथ स्क्रीन की 100vw = चौड़ाई 100% = स्क्रॉलबार के बिना स्क्रीन की चौड़ाई

स्क्रीन की चौड़ाई को मापने के दौरान कैल्क (100% - 50px) का उपयोग करना हमेशा बेहतर होता है। यहां तक ​​कि विंडोज़ ब्राउज़रों पर जहां स्क्रॉलबार सीधे दिखाई देता है, मैकओएस ब्राउज़रों के साथ तुलना करते समय स्क्रीन की चौड़ाई अलग तरह से लौटाएं।

Answer 9

सबसे आसान तरीका है html और बॉडी को 100vw पर सेट करना:

html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }

एकमात्र समस्या सही है-सबसे ज्यादा अगर स्क्रॉलबार दिखाया गया है तो थोड़ा सा कट जाएगा।

Answer 10

मेरे मामले में मेरे पास एक div सेट करने के लिए 100wh - 230px है और मैं उस अतिरिक्त स्क्रॉल चौड़ाई के साथ एक ही समस्या का सामना कर रहा था जो मैंने किया था:

width: calc(100vw - (100vw - 100%) - 230px);

Answer 11

यह मेरा समाधान नहीं है, लेकिन मुझे फुलवॉथ स्पैन में रिश्तेदार तत्व में निरपेक्षता के साथ ड्रॉपडाउन पूर्णता मेनू बनाने में मदद करता है।

हमें css var में: रूट के साथ स्क्रॉल करना चाहिए और फिर उसका उपयोग करना चाहिए।

:root{
 --scrollbar-width: calc(100vw - 100%);
}


div { margin-right: var(--scrollbar-width); }

https://codepen.io/superkoders/pen/NwWyee

Comments

यह केवल इसलिए काम करता है क्योंकि div जड़ पर है। यदि div जड़ में नहीं है तो वह टूट जाता है। इसका कारण यह है कि जब यह संदर्भित किया जाता है तो कैल्क को हल किया जाता है, चयनकर्ता के सापेक्ष इसे संदर्भित किया जाता है, न कि जहां इसे परिभाषित किया गया है। codepen.io/Pedr/pen/YorLPM

— अंडरस्टैंडिंग