मैं वर्तमान में वेबकिट के :: - वेबकिट-स्क्रॉलबार सीएसएस गुणों का उपयोग करके स्क्रॉलबार स्टाइल कर रहा हूं और इन गुणों को एक मूसमव घटना पर बदलना चाहता हूं। समस्या यह है कि मुझे स्क्रॉलबार के सीएसएस को गतिशील रूप से प्राप्त करने का कोई तरीका नहीं दिख रहा है।वेबकिट स्क्रॉलबार गतिशील स्टाइल
जावास्क्रिप्ट (संभवतः jQuery का उपयोग करके) के माध्यम से वेबकिट स्क्रॉलबार को गतिशील रूप से स्टाइल करना संभव है?
इसके लिए आपको स्क्रॉलबार को पूरी तरह से बदलना चाहिए।
यह सिर्फ picking whichever one gives you the easiest API का मामला है।
हाँ, आप इसे कर सकते हैं।
आपको स्टाइलशीट में गतिशील रूप से सीएसएस शैली नियम शामिल करने की आवश्यकता है। और फिर इसे बदलने के लिए।
आप द्वारा this plugin
यह कर सकते हैं आप jQuery का उपयोग करने की जरूरत नहीं है - आप शुद्ध जावास्क्रिप्ट द्वारा यह कर सकते हैं: link 1 link 2। लेकिन क्रॉस-ब्राउज़र समस्याएं हैं।
धन्यवाद, मुझे यह पसंद नहीं है और मैं इसका उपयोग नहीं करूंगा, लेकिन इस समय यह वास्तव में एकमात्र समाधान है। – Sebas
देखते हैं आप एक स्क्रॉलबार गुणों को बदलने के लिए जब माउस यह खत्म हो गया है चाहते हैं। आप इसे सीएसएस के साथ कर सकते हैं, यहां एक उदाहरण http://jsfiddle.net/olgis/7Lg2R/ (बदसूरत रंगीन के लिए खेद है)।
यदि माउस कंटेनर पर है तो स्क्रॉलबार रंग बदलना चाहते हैं तो इस पोस्ट को Style webkit scrollbar on certain state देखें। जावास्क्रिप्ट के साथ और बिना, इसे करने के कई तरीकों का वर्णन किया गया है।
रिमर्क: मुझे नहीं पता कि किस कारण से (सीएसएस न तो जावास्क्रिप्ट के साथ) मिंट के लिए मेरे फ़ायरफ़ॉक्स 11 में काम नहीं करता है, लेकिन वे सभी क्रोम 18.0.1025.151 में पूरी तरह से काम करते हैं।
आप CSS3 के साथ स्क्रॉलबार शैली कर सकते हैं, ये आम तौर पर केवल आंतरिक स्क्रॉलबार के लिए काम करते हैं, न कि वास्तविक ब्राउज़र मुख्य स्क्रॉलबार। आप निम्नलिखित में MOZ विशेषता भी जोड़ सकते हैं।
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
डेमो: http://geryit.com/lib/custom-css3-scrollbars
डाउनलोड स्रोत: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
इस समस्या के लिए एक अच्छा वैकल्पिक हल नहीं है, तो आप स्क्रॉलबार के लिए संकोच शैलियों के साथ कई सीएसएस वर्गों को जोड़ सकते हैं, और उसके बाद के साथ गतिशील कक्षाओं को बदलने जावास्क्रिप्ट।
उदाहरण:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
एक बटन है कि कक्षाओं red और blue के बीच टॉगल:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
यहाँ एक काम बेला है: http://jsfiddle.net/promatik/wZwJz/18/
आप id="scrollbar_style" के साथ एक <style> टैग कर सकते हैं और उसके बाद सीएसएस को गतिशील रूप से इस तरह जोड़ें:
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
बस याद रखें कि innerHTML का उपयोग कर एक तत्व पर नहीं बस अपना नया कोड जोड़ देगा, यह को भी हटा देंगे जो कुछ भी तत्व के अंदर था।
समस्या हल हो गई।
मैं चार टैब प्रत्येक अलग रंग स्क्रॉल पट्टी के साथ ही सेट लेकिन यह केवल
<body id="body" class="greenbody" bgcolor="#202020">
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
एचटीएमएल द्वारा काम के साथ पेज बनाया
प्रत्येक टैब बटन के लिए जावास्क्रिप्ट (केवल स्क्रॉल बार अनुभाग दिखाया गया है ई)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1GreenScrollBar Image ScreenShot2BlueScrollBar Image
क्या यह सब आपका HTML है? हो सकता है कि आप कुछ और एचटीएमएल और सीएसएस मूल बातें पढ़ना चाहें, क्योंकि ऐसा लगता है कि आप निश्चित ऊंचाइयों को लागू करने के लिए मूल सीएसएस से परिचित नहीं हैं और अन्य तत्वों के भीतर सामग्री को स्क्रॉल करते हैं। आखिरकार, इस प्रश्न के भीतर बहुत से प्रश्न पूछे गए प्रश्न हैं। – SEoF
ठीक है, मैं वास्तव में इसके लिए बहुत नया हूं। बस इसे "टाइम-पास" के रूप में कर रहा हूं। और मेरे पास काम करने के अधीन नहीं था ... इसलिए मैंने अपने आप पर एक दस्तावेज़ तैयार किया। और इसे मोबाइल (लगभग परीक्षण) और टैब (परीक्षण क्रोम देव उपकरण) के लिए लगभग संगत बना दिया। – SparkShredder
[राजनूर ब्रार] (https://drive.google.com/open?id=1mFVqZMyJbU1OrpB3oZDAi0vG8pNzDnjz) ठीक है, यह पूरे वेब (.zip) का लिंक है। इसे देखें। आंखों की तुलना में थर अधिक है। @SEoF – SparkShredder
हो सकता है यह मदद कर सकते हैं .. अपने माउस चाल घटना http://stackoverflow.com/questions/1212500/jquery-create पर शरीर में गतिशील शैली डालें -सीएसएस-नियम-वर्ग-रनटाइम – Amitd