2011-08-28 20 views
9

क्या स्क्रॉल ट्रैक से पूरी तरह से छुटकारा पाने का कोई तरीका है? या इसे एक तरफ धक्का देने के बजाए सामग्री को ओवरले करना? आईओएस/शेर स्क्रॉलबार की तरह?वेबकिट सीएसएस स्क्रॉलबार स्टाइल

निम्नलिखित बहुत करीब हो जाता है, लेकिन ट्रैक पारदर्शी होने के बावजूद, स्क्रोल करने योग्य क्षेत्र की सामग्री को धक्का दिया जाता है और पृष्ठ पृष्ठभूमि दिखाती है।

::-webkit-scrollbar { 
    width:8px; 
    height:8px; 
    -webkit-border-radius: 4px; 
} 

::-webkit-scrollbar-track, 
::-webkit-scrollbar-track-piece { 
    background-color:transparent; 
} 

::-webkit-scrollbar-thumb { 
    background-color: rgba(053, 057, 071, 0.3); 
    width: 6px; 
    height: 6px; 
    -webkit-border-radius:4px; 
} 
+0

ऐसे jQuery आधारित [jScrollPane] के रूप में एक कस्टम स्क्रॉलबार का उपयोग क्यों नहीं, है (http : //jscrollpane.kelvinluck.com/)? यदि आप चाहें तो सामग्री को रखने के लिए आप इसे स्टाइल कर सकते हैं। – Artyom

+4

मैंने jScrollPane की कोशिश की है, साथ ही सीएसएस 3 अनुवाद, सीएसएस पदों आदि का उपयोग करके अपने कुछ समाधानों का प्रयास किया है ... कोई भी वास्तविक स्क्रॉलबार जितना तेज़ नहीं है। यह ब्राउज़र में पहले से बनाए गए कुछ के लिए बहुत अधिक अतिरिक्त ओवरहेड की तरह लगता है। यदि कुछ जावास्क्रिप्ट नकली के बजाय मौजूदा स्क्रॉलर्स का उपयोग करना संभव है, तो यह एक बेहतर विचार की तरह लगता है। – nicholas

+0

मैंने http://www.baijs.nl/tinyscrollbar/ को महान काम करने के लिए पाया है और तेज़ है (स्क्रॉलिंग के लिए सामग्री की प्रतिक्रिया के संदर्भ में) और सेट अप करने में बहुत आसान है। –

उत्तर

1

हम्म, मैंने सोचा कि मैं इस एक पहले से है, शायद नहीं उत्तर दिया:

  • शरीर
  • पर अतिप्रवाह छुपाएं साइट या जो भी आप एक साथ स्क्रॉल कर रहे हैं की संपूर्ण सामग्री लपेट div,
  • div (ओवरफ़्लो: स्क्रॉल या ओवरफ़्लो-वाई: स्क्रॉल) के लिए सीएसएस गुणों को शामिल करें।

अब आप आरजीबीए (0,0,0,0.3) का उपयोग कर किसी भी अस्पष्टता को ट्रैक सीएसएस सेट कर सकते हैं क्योंकि स्क्रॉल शरीर का हिस्सा नहीं है।

  • जो कुछ भी आप की तरह रंग की एक पारदर्शी div साथ अतिप्रवाह बात करो और स्क्रॉलबार ओवरले करने के लिए (z- सूचकांक के माध्यम से),:

    फ़ायरफ़ॉक्स स्क्रॉल पट्टी को अनुकूलित अगर आप प्रयोग करना चाहते हैं के लिए एक और टिप करने के लिए है

  • पूरे स्क्रॉल सेक्शन (संभवतः कुछ स्थिति जैसे: पूर्ण; दाएं: 0; यदि आप पूरी विंडो के लिए स्क्रॉल का उपयोग कर रहे हैं) पर div को स्थिति दें)
  • पॉइंटर-ईवेंट का उपयोग करें: कोई भी नहीं; divs सीएसएस पर इसे अर्द्ध पारदर्शी बनाने के लिए।

यह फ़ायरफ़ॉक्स को थोड़ा रंग/बनावट स्क्रॉल देगा।

मैं अभी तक इसे करने की कोशिश नहीं की है (तुलनीयता के लिए सही करने के लिए स्क्रॉल मजबूर करने के लिए आदर्श हो सकता है), लेकिन यह कर-सक्षम

+0

मुझे यकीन नहीं है कि मैं समझता हूं कि आपका क्या मतलब है। इस प्लंक को देखें: http://plnkr.co/edit/hbBT0lehOHlD0cizHmVn?p=preview। जो मैं करने के लिए देख रहा हूं वह लाल पैराग्राफ को दाईं ओर फिट करने के लिए मिलता है, और नीली स्क्रॉल अंगूठे उन पर तैरने के लिए मिलता है। अगर मैं किनारों से नीले स्क्रॉल अंगूठे को थोड़ा सा खींच सकता हूं, तो भी बेहतर। – nicholas

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