WebKit / Blink में MacOS ट्रैकपैड उपयोगकर्ताओं के लिए छिपी हुई स्क्रॉल पट्टियों को रोकना

Question

10.7 (Mac OS X Lion) के बाद से MacOS पर WebKit / Blink's (Safari / Chrome) डिफ़ॉल्ट व्यवहार उपयोग में नहीं होने पर ट्रैकपैड उपयोगकर्ताओं से स्क्रॉल बार को छुपाने के लिए है। यह भ्रामक हो सकता है ; स्क्रॉल बार अक्सर केवल दृश्य क्यू होता है जो एक तत्व स्क्रॉल करने योग्य होता है।

उदाहरण ( jsfiddle )

एचटीएमएल

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

सीएसएस

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}​

वेबकिट (क्रोम) स्क्रीनशॉट

प्रेस्टो (ओपेरा) स्क्रीनशॉट

---

मैं हमेशा एक स्क्रॉल पट्टी को वेबकेट में स्क्रॉल करने योग्य तत्व पर कैसे प्रदर्शित कर सकता हूं?

Comments

क्या आपने अतिप्रवाह की कोशिश की है: स्क्रॉल करें? यह क्रोम में काम करता था। इसे स्क्रॉलबार को हमेशा प्रदर्शित करने के लिए मजबूर करना चाहिए।

— xaddict

ध्यान दें कि मैक ओएस एक्स पर फ़ायरफ़ॉक्स में भी यह एक समस्या है।

— Blaise

जब मैं अपने सिस्टम और उपयोगकर्ता एजेंट के साथ UI में गड़बड़ी करता हूं, तो मुझे उससे नफरत है ।

— amn

Answer 1

स्क्रॉल पट्टी की उपस्थिति को WebKit के -webkit-scrollbarछद्म तत्वों  ^{[ ब्लॉग ] के} साथ नियंत्रित किया जा सकता है । आप -webkit-appearance ^{[ डॉक्स ]} को सेट करके डिफ़ॉल्ट रूप और व्यवहार को अक्षम कर सकते हैं none।

क्योंकि आप डिफ़ॉल्ट शैली को हटा रहे हैं, इसलिए आपको शैली को स्वयं निर्दिष्ट करना होगा या स्क्रॉल बार कभी भी दिखाई नहीं देगा। निम्नलिखित सीएसएस छुपा स्क्रॉल सलाखों की उपस्थिति को फिर से बनाता है:

उदाहरण ( jsfiddle )

सीएसएस

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

वेबकिट (क्रोम) स्क्रीनशॉट

Comments

मजबूर macosx शेर स्क्रॉलबार के लिए, यहाँ वर्णित चाल इस तकनीक के साथ काम नहीं करती है: stackoverflow.com/a/3417992/62255 । हालांकि कोई परेशान नहीं है - चूंकि हम स्पष्ट रूप से आयामों को यहां स्थापित कर रहे हैं, इसलिए हम उन्हें सीधे एक्सेस कर सकते हैं।

— jedierikb

ध्यान दें कि आप स्क्रॉलबार के ट्रैक / पृष्ठभूमि को भी इसके साथ कस्टमाइज़ कर सकते हैं:.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }

— XML

नोट वेबकिट स्क्रॉलबार शैलियाँ iOS 7 (और संभवतः 6) में काम नहीं करती हैं।

— रॉब

उल्लेख करने के लिए एक बात यह है कि, मेरे परीक्षण में और किसी और द्वारा की गई एक पुरानी टिप्पणी से ऐसा लगता है कि आपके पास हमेशा ऑन-स्क्रोलबार और गति-जैसी स्क्रॉल नहीं हो सकती है जो कि लोग iOS के साथ उपयोग किए जाते हैं। ऐसा करने से गति-स्क्रॉलिंग सीएसएस अपने कस्टम स्क्रॉलबार कारण गायब हो जाने की।

— jmq

हाल ही में इसे सत्यापित नहीं किया गया है, लेकिन मैंने इस नोट को हमारे सीएसएस में पाया जिसने इस समाधान को संदर्भित किया: "ध्यान दें कि यह विंडोज़ पर क्रोम में ओएस एक्स शैली स्क्रॉलबार जैसे दिखाएगा।"

— हेनरिक एन

Answer 2

एक पृष्ठ के वेब एप्लिकेशन के लिए जहां मैं स्क्रॉल करने योग्य अनुभागों को गतिशील रूप से जोड़ता हूं, मैं OSX के स्क्रॉलबार को प्रोग्रामेटिक रूप से एक पिक्सेल नीचे और ऊपर स्क्रॉल करके ट्रिगर करता हूं:

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

यह दृश्य क्यू को अंदर और बाहर लुप्त होती चलाता है।

Answer 3

यहां एक छोटा सा कोड है जो आपकी पूरी वेबसाइट पर बार को स्क्रॉल करता है। मुझे यकीन नहीं है कि यह वर्तमान सबसे लोकप्रिय उत्तर से बहुत अलग है, लेकिन यहां यह है:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

इस लिंक पर पाया: http://simurai.com/blog/2011/07/26/webkit-scrollbar

Answer 4

ब्राउज़र स्क्रॉलबार iPhone / iPad पर बिल्कुल भी काम नहीं करते हैं। काम पर हम कस्टम क्रॉस-ब्राउजर यूआई प्रदान करने के लिए jScrollPane जैसे कस्टम जावास्क्रिप्ट स्क्रॉलबार का उपयोग कर रहे हैं: http://jscrollpane.kelvinluck.com/

यह मेरे लिए बहुत अच्छी तरह से काम करता है - आप कुछ बहुत सुंदर कस्टम स्क्रॉलबार बना सकते हैं जो आपकी साइट के डिजाइन को फिट करते हैं।

Answer 5

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

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

कार्यान्वयन कठिन नहीं है, लेकिन आपको ध्यान रखना होगा, कि जब उपयोगकर्ता पहले ही स्क्रॉल कर चुका हो, तो आप शीघ्र प्रदर्शित न करें।

आपको jQuery + अंडरस्कोर और चाहिए

$(window).scroll यह जांचने के लिए कि क्या उपयोगकर्ता पहले से ही खुद को स्क्रॉल कर रहा है,

_.delay() प्रॉम्प्ट प्रदर्शित करने से पहले देरी को ट्रिगर करने के लिए - प्रॉम्प्ट को अप्रिय नहीं होना चाहिए

$('#prompt_div').fadeIn('slow') अपने शीघ्र और निश्चित रूप से फीका करने के लिए

$('#prompt_div').fadeOut('slow') जब उपयोगकर्ता ने प्रॉम्प्ट देखा उसके बाद बाहर निकलने के लिए फीका करना

इसके अलावा, आप उपयोगकर्ता के स्क्रॉलिंग व्यवहार को ट्रैक करने के लिए Google Analytics इवेंट्स को बाइंड कर सकते हैं।