css3 scroll bar style

The composition of the scroll bar

  • :: - webkit-scrollbar integral part of the scroll bar
  • :: - webkit-scrollbar-thumb scroll bar inside the small box, can be moved upward downward (moved to the left or right, depending on whether the vertical scroll bar is a horizontal scroll bar)
  • :: - webkit-scrollbar-track of the scroll bar track (which is equipped with Thumb)
  • :: - at both ends of the track buttons webkit-scrollbar-button scroll bar that allows fine-tuning the position by clicking on the small square.
  • :: - webkit-scrollbar-track-piece inner orbit scroll bar intermediate portion (removed)
  • :: - webkit-scrollbar-corner edges, that is the intersection of two scrollbars
  • :: - for adjusting the size of the element by dragging widgets on the corner of webkit-resizer two scroll bars

Mobile terminal hide scroll the scroll bar: -webkit-scrollbar

::-webkit-scrollbar {/*隐藏滚轮*/
    display: none;
}

application

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-button {
	display: none;
}
::-webkit-scrollbar-track {
	background: #e8e8e8;
	border-radius: 8px;
}
::-webkit-scrollbar-thumb {
	background: #bbb;
	border-radius: 8px;
}
::-webkit-scrollbar-corner {
	background: #e8e8e8;
	border-radius: 8px;
}
::-webkit-scrollbar-resizer {
	background: #e8e8e8;
	border-radius: 8px;
}

Guess you like

Origin blog.csdn.net/luchuanqi67/article/details/90316139