CSS แถบเลื่อนที่กำหนดเองใน div

327

ฉันจะปรับแต่งแถบเลื่อนผ่าน CSS (Cascading Style Sheets) สำหรับหนึ่งdivและไม่ใช่ทั้งหน้าได้อย่างไร

css  html  scrollbar 
— harisdev
แหล่งที่มา
ใช้overflow:auto;กับสิ่ง<div>นั้น มีรายละเอียดพื้นหลังเพิ่มเติมอีกหรือไม่
— Rob W
ฉันไม่ว่า แต่ฉันจำเป็นต้องเลื่อนกำหนดเองอืมม์ .. การออกแบบของ scrollbar
— harisdev
สีที่กำหนดเอง? รองรับเฉพาะ IE เท่านั้นและไม่รองรับเบราว์เซอร์รุ่นใหม่ สิ่งนี้ไม่สามารถทำได้โดยใช้ CSS บริสุทธิ์
— Rob W
1
โซลูชัน JS ที่ง่ายที่สุด (CSS ไม่มีการสนับสนุนข้ามเบราว์เซอร์) - yaireo.github.io/fakescroll
— vsync
ดูคำตอบของฉันได้ที่นี่: stackoverflow.com/questions/7357203/custom-scrollbars/ …
— Buzinas

คำตอบ:

688

ฉันคิดว่ามันจะมีประโยชน์ในการรวบรวมข้อมูลล่าสุดเกี่ยวกับแถบเลื่อน, CSS และความเข้ากันได้ของเบราว์เซอร์

รองรับ CSS ของ Scroll Bar

ขณะนี้ยังไม่มีคำจำกัดความการกำหนด CSS ของแถบเลื่อนข้ามเบราว์เซอร์ บทความ W3C ที่ฉันพูดถึงในตอนท้ายมีข้อความต่อไปนี้และได้รับการปรับปรุงล่าสุด (10 ต.ค. 2557):

เบราว์เซอร์บางตัว (IE, Konqueror) สนับสนุนคุณสมบัติที่ไม่ได้มาตรฐาน 'scrollbar-shadow-color', 'scrollbar-track-color' และอื่น ๆ คุณสมบัติเหล่านี้ผิดกฎหมาย: ไม่ได้กำหนดไว้ในข้อกำหนดคุณสมบัติ CSS ใด ๆ และไม่ได้ทำเครื่องหมายว่าเป็นกรรมสิทธิ์ (โดยนำหน้าด้วย "-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 มีรุ่นเป็นของตนเอง:

Firefox (ตุ๊กแก)

ตั้งแต่เวอร์ชัน 64 Firefox รองรับสไตล์การเลื่อนผ่านคุณสมบัติscrollbar-color(บางส่วนW3C ฉบับร่าง ) และscrollbar-width( W3C แบบร่าง ) ข้อมูลที่ดีเกี่ยวกับการใช้งานสามารถพบได้ในคำตอบนี้

การออกแบบสไตล์แถบเลื่อนข้ามเบราว์เซอร์

ไลบรารีและปลั๊กอิน JavaScript สามารถจัดเตรียมโซลูชันข้ามเบราว์เซอร์ มีตัวเลือกมากมาย

รายการสามารถไปต่อ ทางออกที่ดีที่สุดของคุณคือค้นหาค้นหาและทดสอบโซลูชันที่มี ฉันแน่ใจว่าคุณจะสามารถค้นหาสิ่งที่เหมาะกับความต้องการของคุณ

ป้องกันการใส่สไตล์แถบเลื่อนที่ผิดกฎหมาย

ในกรณีที่คุณต้องการที่จะป้องกันไม่ให้จัดแต่งทรงผมแถบเลื่อนที่ยังไม่ได้นำหน้าอย่างถูกต้องกับ "-vendor" บทความนี้มากกว่าที่ W3C ให้คำแนะนำพื้นฐานบางอย่าง โดยทั่วไปคุณจะต้องเพิ่ม CSS ต่อไปนี้ในสไตล์ชีตผู้ใช้ที่เกี่ยวข้องกับเบราว์เซอร์ของคุณ คำจำกัดความเหล่านี้จะแทนที่สไตล์แถบเลื่อนที่ไม่ถูกต้องในหน้าใด ๆ ที่คุณเยี่ยมชม

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
แหล่งที่มา
228
เว็บมีมานานกว่าสองทศวรรษแล้วและยังไม่มีวิธีมาตรฐานในการกำหนดแถบเลื่อน คณะกรรมการมาตรฐานยี่สิบปีไม่สังเกตเห็นว่าผู้คนเลื่อนสิ่งต่าง ๆ ไม่มีอัตราของการตบมืออย่างช้า ๆ และประชดประชันที่จะแสดงให้เห็นอย่างชัดเจนว่ามันทำให้ฉันรู้สึกอย่างไร แต่ผมคิดว่าการหน่วงเวลา 20 ปีระหว่างการตบมือครั้งแรกกับครั้งที่สอง สำหรับมุมมองบางอย่างฉันยังไม่เกิดเมื่อ WWW ออกมาและตอนนี้ฉันเป็นวิศวกรคอมพิวเตอร์ ทางไป W3C
— คู่ปรับ Shot
3
เพียงเพื่อเพิ่มสองเซ็นต์ของฉัน: Gmail และ Youtube มีแถบเลื่อนเก๋ใน Chrome และพื้นเมืองใน Explorer และ Firefox หากมาตรฐานเหล่านั้นดีพอสำหรับพวกเขามันก็ดีพอสำหรับฉันเช่นกัน
— yonatanmn
9
@ PaulD.Waite เอาละอาจจะ แต่ก็สามารถนำไปใช้กับอะไรก็ได้ และ CSS มีอยู่ในภาษาอย่างแม่นยำเพื่อให้นักออกแบบสามารถเลือกแทนที่ค่าเริ่มต้น แนวคิดทั้งหมดคือผู้ออกแบบ UI ที่ไม่ดีสามารถทำให้องค์ประกอบใด ๆ ใช้งานง่าย แต่ทันทีที่คุณคิดว่าผู้ออกแบบไซต์นั้นไร้ความสามารถอะไรคือจุดประสงค์ในการอนุญาตให้ปรับแต่งหน้าเว็บได้เลย?
— ต่อสู้ยิง
6
@ PaulD.Waite เห็นได้ชัดว่านี่ไม่ใช่สิ่งเหล่านั้น ส่วนหนึ่งเป็นเพราะมันอยู่ในพื้นที่ของหน้าจอที่ผู้ออกแบบไซต์ควรควบคุมทั้งหมดดังนั้นมันจึงไม่มีความเสี่ยงด้านความปลอดภัยและอีกส่วนหนึ่งเป็นเพราะในทางปฏิบัติ - มันไม่ใช่ปัญหา ไซต์จำนวนมากใช้แฮ็กของตนเองเพื่อสร้างสิ่งที่มีลักษณะและการทำงานเช่นแถบเลื่อนและทำงานได้ดี พวกเขาไม่เพียงทำงานได้ดีและดูดีขึ้น แต่ผู้คนเข้าใจวิธีการใช้งานซึ่งเป็นประเด็น น่าเสียดายที่บางครั้งพวกเขาอาจจะเล่นไม่ได้ดีกับฟังก์ชั่นการพิมพ์
— คู่ปรับ Shot
5
คำตอบนี้ไม่ได้ตอบคำถามของเขาอย่างครบถ้วนซึ่งเป็นวิธีการใช้สไตล์ของแถบเลื่อนกับdivเฉพาะแทนที่จะเป็นทั้งหน้า
— Stewart
14

ลองดูสิ

ที่มา: https://nicescroll.areaaperta.com/

ใช้งานง่าย 

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

มันเป็นแถบเลื่อนปลั๊กอิน jQuery เพื่อให้แถบเลื่อนของคุณสามารถควบคุมได้และมีลักษณะเหมือนกันในทุกระบบปฏิบัติการ

— Dilusha Gonagala
แหล่งที่มา
ฉันแน่ใจว่ามันอาจจะปรับแต่งได้ แต่การสาธิตในหน้าของพวกเขาเลื่อนช้าเกินไปและแถบเลื่อนนั้นยากเกินกว่าจะคว้าได้
— ห่าน
4
เช่นเดียวกับปลั๊กอิน jQuery แทบทั้งหมด - [ตัวสั่น] - นี่ช้ามากเมื่อเทียบกับการปรับใช้ GPU แบบเร่งความเร็ว ไม่เหมาะสมอย่างสมบูรณ์สำหรับการใช้งานที่รุนแรงและเป็นอุปสรรคต่อ UX ที่ดี ฉันขอแนะนำให้คุณหลีกเลี่ยงสิ่งนี้เว้นแต่ว่าจะเป็นเว็บไซต์ของเล่น
— John Weisz
2
ฉันเกลียดเมื่อมีคนเรียกจาวาสคริปต์ที่บริสุทธิ์แล้วว่า BAM! ปลั๊กอิน jquery
— Dinh Tran
ฉันจะไม่แนะนำให้ใช้ nicescroll เนื่องจากจะปิดใช้งานการทำงานของเบราว์เซอร์ การเลื่อนด้วยการคลิกกลางไม่สามารถใช้งานได้กับ nicescroll
— Aloso
รัก niceScroll นี้มันไม่ได้เพิ่ม wrapper div รอบองค์ประกอบซึ่งหมายความว่ามันจะไม่ทำลายโครงสร้าง HTML
— datdinhquoc
11

แถบเลื่อนที่กำหนดเองไม่สามารถทำได้ด้วย CSS คุณจะต้องใช้เวทย์มนตร์ JavaScript

เบราว์เซอร์บางตัวสนับสนุนกฎ CSS ที่::-webkit-scrollbarไม่เฉพาะเจาะจงเช่นใน Webkit แต่ไม่เหมาะเนื่องจากจะทำงานใน Webkit เท่านั้น IE ก็มีอะไรแบบนั้นเหมือนกัน แต่ฉันไม่คิดว่าพวกเขาจะสนับสนุนอีกต่อไป

— elclanrs
แหล่งที่มา
2
คำตอบที่ล้าสมัย
— T.Todua
1
@ T.Todua คำล้าสมัยเกี่ยวกับคำตอบนี้คืออะไร?
— kojow7
6

เช่นเดียวกับหลาย ๆ คนฉันกำลังมองหาสิ่งที่:

  • สไตล์และการใช้งานที่สม่ำเสมอในเบราว์เซอร์ที่ทันสมัยที่สุด
  • ไม่ใช่ jQuery ส่วนต่อขยายที่ไร้สาระบางเส้น cr * p

... แต่อนิจจา - ไม่มีอะไร!

ถ้างานที่ควรทำ ... ฉันสามารถทำบางสิ่งบางอย่างและทำงานในเวลาประมาณ 30 นาที ข้อสงวนสิทธิ์: มีปัญหาเล็กน้อยที่รู้ (และอาจจะยังไม่ทราบ) แต่มันทำให้ฉันสงสัยว่าในโลกนี้มีอะไรอีก 2920 สายของ JS ที่มีให้ในข้อเสนอมากมาย!

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 One
  • IE Xbox 360
  • Google Chrome
  • FireFox
  • อุปรากร
  • การแข่งรถวิบาก

แต่ iScroll ไม่ทำงานด้วยการสัมผัส!

iScrollสาธิต: http://lab.cubiq.org/iscroll/examples/simple/
สาธิตnanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

— Ouadie
แหล่งที่มา
nano scroller ไม่รองรับการเลื่อนในแนวนอน
— FlavourScape
repo ถูกเก็บถาวรgithub.com/cubiq/iscrollฉันอยากจะแนะนำให้มองหาทางเลือกอื่น ๆ
— Ouadie
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;
}

CSS Scroll Bars

2
ขอบคุณสำหรับการสาธิต ก่อนอื่นฉันรันด้วย Firefox 58.0.2 (64- บิต, Windows 7 Pro / 64) และแถบเลื่อนทั้งหมดนั้นเหมือนกัน จากนั้นจึงรันด้วย Chrome เวอร์ชัน 65.0.3325.162 (Build ทางการ) (64 บิต) และพวกมันต่างกันทั้งหมด ดังนั้น (อาจไม่ได้ตั้งใจ) คุณได้แสดงให้เห็นข้อ จำกัด ของ-webkit-วิธีการ
— CODE-READ
4

Firefox เวอร์ชันใหม่ (64) รองรับ CSS Scrollbars Module ระดับ 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

แถบเลื่อน Firefox

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

— Fatih Hayrioğlu
แหล่งที่มา
3

นี่คือตัวอย่าง webkit ที่ใช้งานได้กับ Chrome และ Safari:

CSS:

::-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;
}

เอาท์พุท:

ป้อนคำอธิบายรูปภาพที่นี่

— ปฏิเสธ Wessels
แหล่งที่มา
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 จริง ๆ แล้วมันตอบคำถามของ OP ซึ่งเป็นวิธีการแบ่ง div เพียงหนึ่งแบบ ดี
— Danimal Reks
2

มีวิธีที่คุณสามารถใช้แถบเลื่อนที่กำหนดเองกับองค์ประกอบ div ที่กำหนดเองในเอกสาร HTML ของคุณ นี่คือตัวอย่างที่ช่วยได้ https://codepen.io/adeelibr/pen/dKqZNbแต่เป็นส่วนสำคัญของมัน คุณสามารถทำอะไรเช่นนี้

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

ไฟล์ CSS มีลักษณะเช่นนี้

.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;
}
— Adeel Imran
แหล่งที่มา
2

นี่คือสิ่งที่ Google ใช้ในแอปพลิเคชั่นบางตัวมาเป็นเวลานานแล้ว ดูในรหัสว่าหากคุณใช้คลาสถัดไปพวกเขาจะซ่อนแถบเลื่อนใน Chrome แต่ก็ยังใช้งานได้อยู่

เรียนอยู่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 Maps เมื่อค้นหาสถานที่ในรายการผลลัพธ์ใน UI การออกแบบวัสดุ

— le0diaz
แหล่งที่มา
1

Webkit scrollbar ไม่รองรับเบราว์เซอร์ส่วนใหญ่

รองรับโครเมี่ยม

นี่คือตัวอย่างสำหรับ webkit scrollbar Webkit Scrollbar DEMO

หากคุณกำลังมองหาตัวอย่างเพิ่มเติมตรวจสอบตัวอย่างเพิ่มเติมนี้

อีกวิธีคือปลั๊กอินแถบเลื่อนของ Jquery

รองรับทุกเบราว์เซอร์และใช้งานง่าย

ดาวน์โหลดปลั๊กอินจากดาวน์โหลดที่นี่

วิธีใช้และสำหรับตัวเลือกเพิ่มเติมตรวจสอบสิ่งนี้

การสาธิต

— Nikz
แหล่งที่มา
1

ฉันลองใช้ตัวเลื่อน JS และ CSS จำนวนมากและฉันพบว่านี่ใช้งานง่ายและผ่านการทดสอบบน IE และ Safari และ FF และทำงานได้ดี

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>

สำหรับรายละเอียดเพิ่มเติมเยี่ยมชมหน้าปลั๊กอิน

FaceScroll แถบเลื่อนที่กำหนดเอง

หวังว่ามันจะช่วย

— Yousef Altaf
แหล่งที่มา
0

สำหรับคนที่ยังมองหาทางออกที่ดีเพียงฉันพบปลั๊กอินที่เรียบง่ายนี้

แถบเลื่อนวานิลลาจาวาสคริปต์ที่กำหนดเองพร้อมการเลื่อนแบบเนทีฟทำง่ายน้ำหนักเบาใช้งานง่ายและเบราว์เซอร์ข้าม

ในกรณีของฉันฉันกำลังมองหาวิธีการแก้ปัญหา JJ ผู้เขียนยังให้การห่อสำหรับปฏิกิริยาตอบสนองเชิงมุม vue และตัวอย่างต่อไป

— ManBearPig
แหล่งที่มา
0

เบราว์เซอร์ Webkit (เช่น Chrome, Safari และ Opera) รองรับองค์ประกอบที่ไม่เป็นมาตรฐาน:: -องค์ประกอบหลอกwebkit-scrollbarซึ่งช่วยให้เราสามารถปรับเปลี่ยนลักษณะของแถบเลื่อนของเบราว์เซอร์

หมายเหตุ: :: - WebKit-เลื่อนไม่สนับสนุน 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>

ใช้สไตล์ CSS เป็น 

//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 { // ... // }
— МаксимВладимирович
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.