บทความนี้จะแนะนำโค้ดตัวอย่างสำหรับการกำหนดค่าสไตล์แถบเลื่อน H5 และแบ่งปันกับทุกคน โดยมีรายละเอียดดังนี้:
/* สีพื้นหลังของแถบเลื่อนของแถบเลื่อน */::-webkit-scrollbar-track { สีพื้นหลัง: #b46868;}/* สีของแถบเลื่อน */::-webkit-scrollbar-thumb { สีพื้นหลัง : rgba( 0, 0, 0, 0.2);} /* สีของปุ่มฟังที่ปลายทั้งสองข้างของรางสไลด์*/::-webkit-scrollbar-button { สีพื้นหลัง: #7c2929;}/* สีของมุมคมที่จุดตัดของแถบเลื่อนแนวนอนและแถบเลื่อนแนวตั้ง*/::-webkit-scrollbar-corner { สีพื้นหลัง: สีดำ;} // วิธีการตั้งค่าของ IE เอง และเบราว์เซอร์ตัวแรกที่สามารถปรับแต่งแถบเลื่อนได้นั้นเข้ากันได้กับ body { scrollbar-face-color: #b46868;} เริ่มต้นจาก IE5.5 ตัวอย่าง /* Document scrollbar */::-webkit-scrollbar { width: 8px;}::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); รัศมีเส้นขอบ: 10px;}::-webkit-scrollbar-thumb { รัศมีเส้นขอบ : 10px; กล่องเงา: ใส่ 0 0 6px rgba (0, 0, 0, 0.5);}/* องค์ประกอบที่เลื่อนได้ */.some-element::webkit-scrollbar {}<div class=custom-scrollbar> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus คุณต้องการอะไร, consequatur velit นั่ง? </p></div>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network