सीएसएस अनुकूलित div में स्क्रॉल बार

327

मैं एक divऔर पूरे पृष्ठ के लिए CSS (कैस्केडिंग स्टाइल शीट्स) के माध्यम से एक स्क्रॉल बार कैसे अनुकूलित कर सकता हूं ?

css  html  scrollbar 
— harisdev
स्रोत
overflow:auto;बस उसी पर अमल करें <div>। कोई और पृष्ठभूमि विवरण?
— रोब डब्ल्यू
मैंने ऐसा किया, लेकिन मुझे कस्टम स्क्रॉलबार की आवश्यकता है,
— उह
कस्टम रंग? यह केवल IE में समर्थित है, और अन्य आधुनिक ब्राउज़रों में नहीं। यह शुद्ध CSS का उपयोग करके हासिल नहीं किया जा सकता है।
— रोब डब्ल्यू
1
सरलतम जेएस समाधान (CSS में कोई क्रॉस-ब्राउज़र समर्थन नहीं है) - yaireo.github.io/fakescroll
— vsync
मेरा जवाब यहां देखें: stackoverflow.com/questions/7357203/custom-scrollbars/…
— Buzinas

जवाबों:

688

मुझे लगा कि स्क्रॉल बार, सीएसएस और ब्राउज़र संगतता पर नवीनतम जानकारी को समेकित करना मददगार होगा।

स्क्रॉल बार सीएसएस समर्थन

वर्तमान में, कोई क्रॉस-ब्राउज़र स्क्रॉल बार सीएसएस स्टाइल परिभाषाएं मौजूद नहीं हैं। W3C लेख जिसका मैं अंत में उल्लेख करता हूं, में निम्नलिखित कथन है और हाल ही में अपडेट किया गया था (10 अक्टूबर 2014):

कुछ ब्राउज़र (IE, कॉनकेर) गैर-मानक गुणों 'स्क्रॉलबार-छाया-रंग', 'स्क्रॉलबार-ट्रैक-कलर' और अन्य का समर्थन करते हैं। ये गुण अवैध हैं: उन्हें न तो किसी सीएसएस विनिर्देश में परिभाषित किया गया है और न ही उन्हें स्वामित्व के रूप में चिह्नित किया गया है (उन्हें "-vendor-" के साथ उपसर्ग करके)

माइक्रोसॉफ्ट

जैसा कि दूसरों ने उल्लेख किया है, Microsoft स्क्रॉल बार स्टाइल का समर्थन करता है, लेकिन केवल IE8 और इसके बाद के संस्करण के लिए।

उदाहरण:

<!-- language: lang-css -->

    .TA {
        scrollbar-3dlight-color:gold;
        scrollbar-arrow-color:blue;
        scrollbar-base-color:;
        scrollbar-darkshadow-color:blue;
        scrollbar-face-color:;
        scrollbar-highlight-color:;
        scrollbar-shadow-color:
    }

Chrome और Safari (WebKit)

इसी प्रकार, WebKit का अब अपना स्वयं का संस्करण है:

फ़ायरफ़ॉक्स (गेको)

संस्करण 64 के रूप में फ़ायरफ़ॉक्स संपत्तियों scrollbar-color(आंशिक रूप से, W3C ड्राफ्ट ) और scrollbar-width( W3C ड्राफ्ट ) के माध्यम से स्क्रॉलबार स्टाइल का समर्थन करता है । कार्यान्वयन के बारे में कुछ अच्छी जानकारी इस उत्तर में मिल सकती है ।

क्रॉस-ब्राउज़र स्क्रॉल बार स्टाइल

जावास्क्रिप्ट लाइब्रेरी और प्लग-इन एक क्रॉस-ब्राउज़र समाधान प्रदान कर सकते हैं। कई विकल्प हैं।

सूची और भी अधिक लम्बी हो सकती हैं। आपकी सबसे अच्छी शर्त यह है कि उपलब्ध समाधानों की खोज, अनुसंधान और परीक्षण करें। मुझे यकीन है कि आप कुछ ऐसा पा सकेंगे जो आपकी आवश्यकताओं के अनुरूप होगा।

अवैध स्क्रॉल बार स्टाइल को रोकें

बस अगर आप स्क्रॉल बार स्टाइल को रोकना चाहते हैं, जो "-vendor" के साथ ठीक से उपसर्ग नहीं किया गया है, तो W3C पर यह लेख कुछ बुनियादी निर्देश प्रदान करता है । असल में, आपको निम्नलिखित सीएसएस को अपने ब्राउज़र से जुड़ी उपयोगकर्ता शैली शीट में जोड़ना होगा। ये परिभाषाएँ आपके द्वारा देखे गए किसी भी पृष्ठ पर अमान्य स्क्रॉल बार स्टाइल को ओवरराइड करेंगी।

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

डुप्लिकेट या समान प्रश्न / स्रोत ऊपर लिंक नहीं किया गया

नोट: इस उत्तर में विभिन्न स्रोतों की जानकारी है। यदि किसी स्रोत का उपयोग किया गया था, तो यह इस उत्तर में भी जुड़ा हुआ है।

— JSuar
स्रोत
227
वेब को दो दशक से अधिक समय हो गया है, और अभी भी स्क्रॉलबार को स्टाइल करने का कोई मानक तरीका नहीं है। बीस साल की मानक समितियां यह ध्यान नहीं देती हैं कि लोग चीजों को स्क्रॉल करते हैं। धीमे, व्यंग्यात्मक ताली की कोई दर नहीं है जो पर्याप्त रूप से व्यक्त करेगी कि मुझे कैसा लगता है। लेकिन पहले और दूसरे क्लैप के बीच 20 साल की देरी होगी, मुझे लगता है, फिटिंग होना चाहिए। कुछ परिप्रेक्ष्य के लिए, मैं अभी तक पैदा नहीं हुआ था जब डब्ल्यूडब्ल्यूडब्ल्यू बाहर आया था, और मैं अब एक कंप्यूटर इंजीनियर हूं। जाने के लिए रास्ता, W3C।
— पार्थियन शॉट
3
बस मेरे दो सेंट जोड़ने के लिए: जीमेल और यूट्यूब ने क्रोम में स्क्रॉलबार, और एक्सप्लोरर और फ़ायरफ़ॉक्स में मूल एक है। अगर वे मानक उनके लिए काफी अच्छे हैं तो यह मेरे लिए भी काफी अच्छा है
— yonatanmn
9
@ पॉलड.वाइट वैसे, हो सकता है, लेकिन वह किसी भी चीज पर लागू हो सकता है। और CSS एक भाषा के रूप में सटीक रूप से मौजूद है ताकि डिजाइनर डिफॉल्ट को ओवरराइड करने का विकल्प चुन सकें। पूरा विचार यह है कि एक बुरा यूआई डिजाइनर किसी भी तत्व को अनपेक्षित बना सकता है, लेकिन जैसे ही आप मानते हैं कि साइट डिजाइनर अक्षम है, पेज अनुकूलन की अनुमति देने में क्या बात है?
— पार्थियन शॉट
6
@ पॉलड.वाइट स्पष्ट रूप से, यह उन चीजों में से एक नहीं है। आंशिक रूप से क्योंकि यह स्क्रीन के क्षेत्र में है जिसे साइट डिजाइनर को पूरी तरह से नियंत्रित करना चाहिए, वैसे भी, इसलिए यह कोई सुरक्षा जोखिम नहीं रखता है, और आंशिक रूप से क्योंकि स्पष्ट रूप से व्यवहार में- यह एक गैर-मुद्दा है। बहुत सारी साइटें स्क्रॉल करने वाले की तरह दिखने और व्यवहार करने वाली चीजों को बनाने के लिए अपने स्वयं के हैक को लागू करती हैं, और वे ठीक काम करती हैं। न केवल वे ठीक काम करते हैं, और बेहतर दिखते हैं, लेकिन लोग वास्तव में समझते हैं कि उनका उपयोग कैसे किया जाए, जो कि बिंदु है। दुर्भाग्य से, क्योंकि वे हैक हैं, कभी-कभी वे मुद्रण कार्यक्षमता जैसी चीजों के साथ अच्छा नहीं खेलेंगे।
— पार्थियन ने
5
इस उत्तर पूरी तरह से अपने प्रश्न है, जो कि कैसे एक विशिष्ट करने के लिए स्क्रॉलबार शैलियाँ लागू करने था को संबोधित नहीं करता div , बल्कि एक पूरे पेज की तुलना में।
— स्टीवर्ट
14

इसे आजमाइए

स्रोत: https://nicescroll.areaaperta.com/

सरल कार्यान्वयन 

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

यह एक jQuery प्लगइन स्क्रॉलबार है, इसलिए आपके स्क्रॉलबार नियंत्रणीय हैं और विभिन्न OS के समान हैं।

— दिलुशा गोनगला
स्रोत
मुझे यकीन है कि यह शायद अनुकूलन योग्य है, लेकिन उनके पेज पर डेमो बहुत धीमी गति से स्क्रॉल करता है और स्क्रॉलबार को पकड़ना बहुत मुश्किल है।
— हंस
4
लगभग सभी jQuery प्लगइन्स की तरह - [shudders] - यह देशी, थ्रेडेड, GPU त्वरित स्क्रॉल कार्यान्वयन की तुलना में बहुत धीमी है। गंभीर अनुप्रयोगों के लिए पूरी तरह से अनुपयुक्त, और अच्छे यूएक्स के लिए बाधा। मैं आपको इससे बचने की सलाह दूंगा, जब तक कि यह खिलौना वेबसाइट के लिए न हो।
— जॉन वीज़
2
मुझे इससे नफरत है जब लोग कुछ शुद्ध जावास्क्रिप्ट कहते हैं तो BAM! एक jquery प्लगइन।
— दीन्ह ट्रान
क्योंकि यह ब्राउज़र की कार्यक्षमता को अक्षम करता है, मैं nicescroll का उपयोग करने की अनुशंसा नहीं करूंगा। मिडिल क्लिक के साथ स्क्रॉल करना निस्क्रोल के साथ काम नहीं करता है।
— जोसो
इस अच्छा प्यार को प्यार करो, यह तत्व के चारों ओर आवरण div नहीं जोड़ता है जिसका अर्थ है कि यह html संरचना को नहीं तोड़ता है
— datdinhquoc
11

कस्टम स्क्रॉल बार सीएसएस के साथ संभव नहीं हैं, आपको कुछ जावास्क्रिप्ट जादू की आवश्यकता होगी।

कुछ ब्राउजर नॉन-स्पेक सीएसएस नियमों का समर्थन करते हैं, जैसे कि ::-webkit-scrollbarवेबकिट में लेकिन यह आदर्श नहीं है क्योंकि यह केवल वेबकिट में काम करेगा। IE भी ऐसा ही कुछ था, लेकिन मुझे नहीं लगता कि वे अब इसका समर्थन करते हैं।

— elclanrs
स्रोत
2
अप्रचलित उत्तर
— T.Todua
1
@ T.Todua इस उत्तर के बारे में क्या अप्रचलित है?
— kojow7
6

कई लोगों की तरह, मैं कुछ ऐसी चीज़ों की तलाश में था:

  • सबसे आधुनिक ब्राउज़रों में लगातार स्टाइल और कार्यात्मक
  • नहीं कुछ हास्यास्पद 3000-लाइन फूला हुआ jQuery एक्सटेंशन cr * p

... लेकिन अफसोस - कुछ नहीं!

अच्छी तरह से अगर एक नौकरी के लायक है ... मैं लगभग 30 मिनट में उठने और चलने में सक्षम था। अस्वीकरण: इसके साथ कुछ ज्ञात (और शायद कुछ अभी तक अज्ञात के रूप में) समस्याएं हैं, लेकिन यह मुझे आश्चर्यचकित करता है कि पृथ्वी पर जेएस की अन्य 2920 लाइनें कई प्रसाद में क्या हैं!

var dragParams;
	window.addEventListener('load', init_myscroll);

	/* TODO: Much to do for v axis! */

	function bardrag_mousemove(e) {
	  var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
	  pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
	  dragParams.slider.style.left = pos + 'px';
	  updateScrollPosition(dragParams.slider, pos);
	}

	function updateScrollPosition(slider, offsetVal) {
	  var bar = slider.parentNode;
	  var myscroll = bar.parentNode;
	  var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
	  var maxSlide = bar.offsetWidth - slider.offsetWidth;
	  var viewX = maxView * offsetVal / maxSlide;
	  myscroll.scrollLeft = viewX;
	  bar.style.left = viewX + 'px';
	}

	function drag_start(e) {
	  var slider = e.target;
	  var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
	  dragParams = {
	    clientX: e.clientX,
	    offsetLeft: slider.offsetLeft,
	    slider: e.target,
	    maxLeft: maxLeft
	  };
	  e.preventDefault();
	  document.addEventListener('mousemove', bardrag_mousemove);
	}

	function drag_end(e) {
	  e.stopPropagation();
	  document.removeEventListener('mousemove', bardrag_mousemove);
	}

	function bar_clicked(e) {
	  var bar = e.target;
	  var slider = bar.getElementsByClassName('slider')[0];
	  if (bar.className == 'h bar') {
	    var maxSlide = bar.offsetWidth - slider.offsetWidth;
	    var sliderX = e.offsetX - (slider.offsetWidth / 2);
	    sliderX = Math.max(0, Math.min(sliderX, maxSlide));
	    slider.style.left = sliderX + 'px';
	    updateScrollPosition(slider, sliderX);
	  }
	}

	function init_myscroll() {
	  var myscrolls = document.getElementsByClassName('container');
	  for (var i = 0; i < myscrolls.length; i++) {
	    var myscroll = myscrolls[i];
	    var style = window.getComputedStyle(myscroll);
	    if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
	      addScroller(false, myscroll);
	    }
	    if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
	      addScroller(true, myscroll);
	    }
	  }
	}

	function addScroller(isX, myscroll) {
	  myscroll.className += ' myscroll';
	  var bar = document.createElement('div');
	  var slider = document.createElement('div');
	  var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
	  var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
	  var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
	  slider.style.width = 100 * sliderPx / offsetDim + '%';
	  slider.className = 'slider';
	  bar.className = isX ? 'h bar' : 'v bar';
	  bar.appendChild(slider);
	  myscroll.appendChild(bar);

	  bar.addEventListener('click', bar_clicked);
	  slider.addEventListener('mousedown', drag_start);
	  slider.addEventListener('mouseup', drag_end);
	  bar.addEventListener('mouseup', drag_end);
	  document.addEventListener('mouseup', drag_end);
	}
body {
  background-color: #66f;
}
.container {
  background-color: #fff;
  width: 50%;
  margin: auto;
  overflow: auto;
}
.container > div:first-of-type {
  width: 300%;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */

.myscroll {
  overflow: hidden;
  position: relative;
}
.myscroll .bar {
  background-color: lightgrey;
  position: absolute;
}
.myscroll {
  padding-bottom: 20px;
}
.myscroll .h {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.myscroll .slider {
  background-color: grey;
  position: absolute;
}
.myscroll .h .slider {
  height: 100%;
}
<div class="container">
  <div></div>
</div>
स्निपेट का विस्तार करें

— ne1410s
स्रोत
1
पृष्ठभूमि: रैखिक-ढाल (दाईं ओर, लाल, पीला);
— xgqfrms
5

मैंने बहुत सारे प्लगइन्स आज़माए, उनमें से अधिकांश सभी ब्राउज़रों का समर्थन नहीं करते हैं, मैं इन ब्राउज़रों के लिए iScroll और nanoScroller कार्यों को प्राथमिकता देता हूं :

  • IE11 -> IE6
  • IE10 - WP8
  • IE9 - WP7
  • IE Xbox एक
  • IE Xbox 360
  • गूगल क्रोम
  • फ़ायर्फ़ॉक्स
  • ओपेरा
  • सफारी

लेकिन iScroll टच के साथ काम नहीं करता है!

डेमो iScroll : http://lab.cubiq.org/iscroll/examples/simple/
डेमो nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

— Ouadie
स्रोत
नैनो स्क्रोलर क्षैतिज स्क्रॉल का समर्थन नहीं करता है।
— फ्लेवर्सस्केप
रेपो संग्रहीत है github.com/cubiq/iscroll मैं अन्य विकल्पों की तलाश करने का सुझाव
— दूंगा
5

कृपया इस लिंक को देखें। वर्किंग डेमो के साथ उदाहरण

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

सीएसएस स्क्रॉल बार

2
डेमो के लिए धन्यवाद। मैंने पहली बार फ़ायरफ़ॉक्स 58.0.2 (64-बिट, विंडोज 7 प्रो / 64) के साथ इसे चलाया और इसके सभी स्क्रॉल बार समान थे। फिर क्रोम संस्करण 65.0.3325.162 (आधिकारिक बिल्ड) (64-बिट) के साथ भाग गया और वे सभी अलग थे। तो (शायद अनजाने में) आपने -webkit-दृष्टिकोण की सीमाओं का प्रदर्शन किया है ।
— CODE-REaD
4

फ़ायरफ़ॉक्स नया संस्करण (64) CSS स्क्रॉलबार मॉड्यूल स्तर 1 का समर्थन करता है 

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>
स्निपेट का विस्तार करें

स्रोत: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

फ़ायरफ़ॉक्स स्क्रॉलबार

https://codepen.io/fatihhayri/pen/pqdrbd

— फतिह हैरियुलु
स्रोत
3

यहाँ एक उदाहरण है जो क्रोम और सफारी के लिए काम करता है:

सीएसएस:

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

आउटपुट:

यहां छवि विवरण दर्ज करें

— डेसलेस वेसल्स
स्रोत
3 
.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

मुझे एक जैसा एक अच्छा मोबाइल / osx दिया।

— csomakk
स्रोत
1
अधिक संक्षिप्त प्रतिक्रिया। IMHO ने वास्तव में ओपी के सवाल का जवाब दिया कि कैसे सिर्फ एक div शैली थी। अच्छा लगा।
— Danimal Reks
2

एक तरीका है जिसके द्वारा आप अपने HTML दस्तावेज़ों में कस्टम स्क्रॉल तत्वों पर कस्टम स्क्रॉलबार लागू कर सकते हैं। यहाँ एक उदाहरण है जो मदद करता है। https://codepen.io/adeelibr/pen/dKqZNb लेकिन इसके सार के रूप में। आप ऐसा कुछ कर सकते हैं।

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

सीएसएस फ़ाइल इस तरह दिखता है।

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}
— अदील इमरान
स्रोत
2

यह वह है जो Google ने अपने कुछ अनुप्रयोगों में लंबे समय से उपयोग किया है। उस कोड में देखें, यदि आप अगली कक्षाओं को लागू करते हैं, तो वे किसी तरह क्रोमबार में स्क्रॉलबार छिपाते हैं, लेकिन यह अभी भी काम करता है।

वर्ग हैं jfk-scrollbar, jfk-scrollbar-borderlessऔरjfk-scrollbar-dark

.testg{ border:1px solid black;  max-height:150px;  overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}

/* The google css code for scrollbars */
::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
    background: transparent
}
body::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
.jfk-scrollbar::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
.jfk-scrollbar::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
.jfk-scrollbar::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar::-webkit-scrollbar-corner {
    background: transparent
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body.jfk-scrollbar::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
<div class="testg">
    <div class="content">
        Look Ma'  my scrollbars doesn't have arrows <br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
    <div class="content">
        Look Ma'  my scrollbars dissapear in chrome<br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
स्निपेट का विस्तार करें

http://jsfiddle.net/76kcuem0/32/

मुझे सिर्फ स्क्रॉलबार से तीर निकालने के लिए उपयोगी लगा। 2015 तक इसका उपयोग Google मैप्स में तब किया गया है जब इसके सामग्री डिज़ाइन UI में परिणामों की सूची में स्थानों की खोज की गई थी।

— le0diaz
स्रोत
1

अधिकांश ब्राउजर पर वेबकिट स्क्रॉलबार सपोर्ट नहीं करता है।

CHROME पर समर्थन करता है

यहां वेबकिट स्क्रॉलबार वेबकिट स्क्रॉलबार डेमो के लिए एक डेमो है

यदि आप अधिक उदाहरणों की तलाश कर रहे हैं, तो इस अधिक उदाहरणों को जांचें

एक और तरीका है Jquery स्क्रॉल बार प्लगइन

यह सभी ब्राउज़रों पर समर्थन करता है और लागू करने में आसान है

Download Here से प्लगइन डाउनलोड करें

कैसे उपयोग करें और अधिक विकल्पों के लिए यह देखें

डेमो

— Nikz
स्रोत
1

मैंने बहुत सी जेएस और सीएसएस स्क्रॉल की कोशिश की और मैंने पाया कि यह आईई और सफारी और एफएफ पर उपयोग करना और परीक्षण करना बहुत आसान है और ठीक काम किया

AS @thebluefox सुझाता है

यहाँ दिया गया है कि यह कैसे काम करता है

नीचे स्क्रिप्ट जोड़ें 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

और यह यहां उस अनुच्छेद में है जहां आपको स्क्रॉल करने की आवश्यकता है

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

अधिक जानकारी के लिए प्लगइन पेज पर जाएं

फेसक्रोल कस्टम स्क्रॉलबार

आशा है ये मदद करेगा

— यूसेफ अल्ताफ
स्रोत
0

अभी भी एक अच्छा समाधान के लिए देख रहे लोगों के लिए मैं सिर्फ इस प्लगइन simplebar पता लगाना

देशी स्क्रॉल के साथ कस्टम स्क्रॉलबार वेनिला जावास्क्रिप्ट पुस्तकालय, सरल, हल्के, उपयोग करने में आसान और क्रॉस-ब्राउज़र।

मेरे मामले में, मैं reactJS समाधान की तलाश कर रहा था, लेखक प्रतिक्रिया, कोणीय, प्रतिज्ञा और अगले उदाहरणों के लिए आवरण भी प्रदान करता है

— इंसान भालू शूकर
स्रोत
0

वेबकिट ब्राउज़र (जैसे क्रोम, सफारी और ओपेरा) गैर-मानक :: - वेबकिट-स्क्रॉलबार छद्म तत्व का समर्थन करता है , जो हमें ब्राउज़र के स्क्रॉलबार के रूप को संशोधित करने की अनुमति देता है।

नोट: :: - वेबकिट-स्क्रॉलबार Firefox या IE और एज द्वारा समर्थित नहीं है।

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

div {
  width: 15rem;
  height: 8rem;
  padding: .5rem;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  overflow: auto;
}

.box::-webkit-scrollbar {
  width: .8em;
}

.box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
 
.box::-webkit-scrollbar-thumb {
  background-color: dodgerblue;
}
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
स्निपेट का विस्तार करें

संदर्भ: कैसे एक कस्टम स्क्रॉलबार बनाने के लिए

— विशाल
स्रोत
0

मान लीजिए कि आपके पास div है 

<div class="custom_scroll"> ... </div>

के रूप में सीएसएस शैलियाँ लागू करें 

//custom scroll style definitions
.custom_scroll
{
  overflow-y: scroll;
}

//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar
{
    width: 5px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    opacity: 0.5;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    //background-color: #555;
}

रिजल्ट स्क्रॉल के रूप में दिखाई देगा

यहां छवि विवरण दर्ज करें

— Saumyajit
स्रोत
-1

या इस तरह से कुछ का उपयोग करें:

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};

और आरंभ करें:

<body onload="new MiniScroll(this);"></body>

और अनुकूलित करें:

.scroll-place { // ... // }
.scroll { // ... // }
— Максим Владимирович
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.