2014-05-06 13 views
6

वेबपृष्ठ बनाने के लिए उत्तरदायी लेआउट और बहुत सी सीएसएस का उपयोग करके, मुझे स्क्रॉलबार छुपा या दिखाया गया है और 17px द्वारा लेआउट बदल रहा है।विभिन्न प्रकार के स्क्रॉलबार (उदाहरण के लिए सामान्य/छुपा ओएसएक्स)

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

इस मैं जैसे ब्राउज़र पता लगाने के लिए शुरू कर दिया हल करने के लिए कोशिश कर रहा है:

if($.browser.chrome) { 
    // adapt layout by 17px 
} else if ($.browser.mozilla) { 
    // adapt layout by 17px 
} else if ($.browser.safari) { 
    // dont adapt layout by 17px 
} 

लेकिन उस विषय पर पदों की एक बहुत कुछ पढ़ने के बाद, मुझे एहसास हुआ कि ब्राउज़र का पता लगाने के बजाय बहुत से लोगों को सुविधा का पता लगाने की सलाह देते हैं। तो क्या यह पता लगाने का कोई तरीका है कि ब्राउज़र स्क्रॉलबार को कैसे प्रबंधित कर रहा है? चाहे वे पैगेलआउट का हिस्सा हों या वे सफारी में सब कुछ के ऊपर होवर करेंगे?

आपकी मदद के लिए धन्यवाद!

+0

है कि आप $ .browser उपयोग कर रहे हैं jQuery के संस्करण() पर निर्भर करता है सुविधा का पता लगाने के पक्ष में पदावनत किया गया है। आप इसके लिए http://modernizr.com/ जैसे कुछ देखना चाहते हैं। –

+0

मैंने किया, यह सुविधा का पता लगाने के लिए वास्तव में बहुत उपयोगी है, लेकिन मुझे आवश्यक स्क्रोलबार के बारे में जानकारी बहुत विशिष्ट लगती है, कम से कम मैं इसे आधुनिकता के दस्तावेज़ीकरण में नहीं ढूंढ पाया। – ibanes88

उत्तर

1

hiddenscroll परीक्षण जो आप Modernizr में देख रहे हैं वह होना चाहिए। इसका अभी तक मुख्य पुस्तकालय में , लेकिन आप v3.modernizr.com

+0

बहुत बहुत धन्यवाद! दिलचस्प लग रहा है, मैं कोशिश करूँगा! – ibanes88

5

पर v3 बीटा (जो इस परीक्षा में भी शामिल है) के एक कस्टम संस्करण बना सकते हैं यह मापने के लिए आसान है। एक स्क्रॉल तत्व पर, स्क्रॉलबार मोटाई बस है:

var scrollbarWidth = scrollableEl.offsetWidth - scrollableEl.clientWidth;` 

explained very well दाऊद वॉल्श द्वारा के रूप में। स्क्रॉलबार चौड़ाई/ऊंचाई शून्य पर है:

  • ओएसएक्स (जब तक कि माउस सेटिंग्स को संशोधित नहीं किया गया हो, या शेर से पहले)।

  • टच डिवाइस ब्राउज़र (एंड्रॉइड, आईओएस, विंडोज फोन)।

  • टैबलेट मोड में आईई 12 एज (गतिशील रूप से परिवर्तनीय, स्क्रॉलबार शो और छुपाएं और टैबलेट मोड बदलते समय पेज रीड्रॉप्स। मुझे लगता है कि परिवर्तन आकार बदलने के लिए पंजीकरण करके और स्क्रॉलबार चौड़ाई का परीक्षण करके पता लगाने योग्य है)।

  • सीएसएस द्वारा बदला जा सकता है उदा। ::-webkit-scrollbar { width: 1em; } उदा। -ms-overflow-style: none (documentation)।

  • शून्य हो सकता है यदि तत्व अभी तक दस्तावेज़ में नहीं है (हो सकता है कि स्क्रिप्ट <head> में चल रही हो?)।

अन्य नोट:

  • Modernizr एक hiddenscrollbar सुविधा का पता लगाने जो करता है, तो शून्य चौड़ाई स्क्रॉलबार इस्तेमाल किया पता लगाता है।

  • ऊंचाई अंतर को भी मापना चाहिए, लेकिन यह IE8 में विश्वसनीय नहीं था (विशेष रूप से ज़ूम परिवर्तन के कारण आकार बदलने के बाद अविश्वसनीय), इसलिए मैंने हमेशा चौड़ाई अंतर का उपयोग किया है।

  • यदि चौड़ाई गैर-शून्य है, तो यह भी बदल सकती है: (1) पृष्ठ ज़ूम परिवर्तन (चौड़ाई कुछ ब्राउज़रों पर भौतिक पिक्सल के समान ही रहता है, इसलिए लॉजिकल पिक्सल बदलते हैं।यद्यपि चुटकी-ज़ूम अलग-अलग कार्य करता है), (2) स्टाइल परिवर्तन -webkit-scrollbar, (3) डेस्कटॉप थीम में परिवर्तन (प्रमुख विषयों के लिए चौड़ाई अलग-अलग, या वैयक्तिकृत थीम)।

यहाँ परीक्षकों के लिए कुछ लिंक कर रहे हैं:

  • कुछ सरल plain JavaScript code (शायद बेहतर div पुनर्प्रवाहित calcs से बचने के लिए स्थायी बनाने के लिए)।

  • Modernizr cow test जो AFAIK स्क्रॉलबारविड्थ शून्य होने पर भी सिडेंसक्रॉलबार को सत्य मानता है (cssscrollbar भी देखें)।

  • कुछ ugly jQuery code

+0

एज अधिकतम होने पर टैबलेट मोड के लिए एक आकार बदलने की घटना नहीं चलाता है। – Timothy003

+0

ध्यान दें कि यदि तत्व 'सीमा' है तो यह विधि काम नहीं करती है –

संबंधित मुद्दे