CSS scroll bar, css scroll bar style

CSS scroll bar, css scroll bar style
* Directory [1] condition [2] default [3] size [4] compatible with [5] Before customizing

Scroll bars are often seen on webpages, but are not paid enough attention. Debugging is performed only when compatibility is required due to scroll bar issues. This article will sort out the common content of the scroll bar.

 

Condition

The scroll bar and overflow are closely related. A scroll bar may appear only when the parent-level overflow value is auto or scroll and the element content exceeds the element area.

 

Default

No matter what browser, the default scroll bar is from

 

Dimensions

The following code indicates that the scroll bar occupies the available width of the browser:

chrome/firefox/IE 17pxsafari 21px

.box{    width: 400px;    overflow: scroll;}.in{    *zoom: 1;}

<div class="box">    <div id="in" class="in"></div></div>

console.log(400-document.getElementById('in').clientWidth);

 

Compatible

[1] IE7 by default-the browser has a vertical scroll bar by default, while other browsers do not

// IE7-browser html {overflow-y: scroll;} // other browsers html {overflow: auto;} // remove the default page scroll bar html {overflow: hidden ;}

[2] IE7-different from other browsers on the width setting mechanism of the scroll bar

.box{    width: 200px;    height: 100px;    background-color: pink;    overflow: scroll;}.in{    width: 100%;    height: 60px;    background-color: lightgreen;}

<Div class = "box"> <div class = "in"> test text </div>

A vertical scroll bar appears in the parent box. in fact, the available width of child in is reduced. IE7-the browser's sub-width ignores the width of the scroll bar. If the sub-width is 400 * 100% = 400px, a horizontal scroll bar is displayed; the sub-width of other browsers takes into account the width of the scroll bar, and the sub-width = (400-scroll bar width) * 100%

The picture on the left is IE7-browser, and the picture on the right is other browsers.

[3] horizontal center beating

When an element is in the same area of water on the page, the vertical scroll bar appears on the page and jumps out horizontally. The solution is as follows:

// IE8-default html {overflow-y: scroll} // IE9 +, 100vw indicates the browser width, and 100% indicates the available content width. container {padding-left: calc (100vw-100% )}

 

Custom

[1] IE

The IE browser supports CSS styles to change the custom color of the widget of the scroll bar.

Scrollbar-face-color the color of the protruding part of the scroll bar scrollbar-shadow-color the color of the stereo scroll bar shadow scrollbar-highlight-color the color of the blank part of the color of the scrollbar-3dlight-color scroll bar the color of the scrollbar-darkshad- color the color of the strong shadow of the scroll bar scrollbar-track-color the background color of the scroll bar scrollbar-arrow-color the color of the upper and lower arrow scrollbar-base-color the Basic color of the scroll bar

[2] webkit

The webkit kernel browser supports customizing the style of the scroll bar, but unlike IE, webkit is implemented through pseudo classes.

Composition

:-Webkit-scrollbar-thumb scroll bar:-webkit-scrollbar-track outer rail :: -webkit-scrollbar-track-piece:-webkit-scrollbar-corner:-webkit-scrollbar-buttons

[Note] When you set the width and height of the scroll bar as the percentage value, it is relative to the window size.

[Note] the stacked relationship of the scroll bar is that the scrollbar is at the bottom layer. The top is the outer track of the track and the inner track of the track-piece. The button, corner, and thumb slider have the top layer.

Pseudo-class

: Horizontal // The horizontal pseudo class applies to the scroll bars in any horizontal direction: vertical // vertical pseudo class applies to the scroll bars in any vertical direction: decrement // decrement pseudo class applies to buttons and orbital fragments. It indicates a descending button or orbital fragment. For example, the "increment // increment" pseudo class can move the area up or down to the right. It applies to buttons and orbital fragment. Indicates an incremental button or orbital fragment. For example, the start // start pseudo class applies to the buttons or orbital fragment that can move the area down or left. Indicates whether the object (Button track fragment) is placed before the slider: end // end pseudo class applies to button and track fragment. Indicates whether the object (button track fragment) is placed behind the slider: double-button // double-button pseudo class applies to button and track fragment. Determines whether the end of the track is a pair of buttons. That is, orbital fragments are placed together with a pair of buttons. : Single-button // The single-button pseudo class applies to buttons and orbital fragments. Determines whether the end of the track is a button. That is, the orbital fragment is placed next to a separate button. : No-buttonno-button: the pseudo class indicates that there is no button at the end of the track. : Corner-present // the corner-present pseudo class indicates whether the corner of the scroll bar exists. : Window-inactive // applicable to all scroll bars, indicating the area containing the scroll bar. The focus is not in this window. :-Webkit-scrollbar-track-piece: start {/* top half or left half of the scroll bar */}:-webkit-scrollbar-thumb: window-inactive {/* Status of the slider when the focus is not in the current area */}:-webkit-scrollbar-button: horizontal: decrement: hover {/* When the mouse is in the status of the button under the horizontal scroll bar */}

Common settings

. Box {width: 200px; height: 100px; background-color: pink; overflow: scroll; font-size: 20px; line-height: 40px ;} /* define the size of the horizontal and vertical scroll bars corresponding to the height and width of the scroll bar and the background height */. box:-webkit-scrollbar {width: 16px; height: 16px; background-color: # F5F5F5;}/* defines the shadow + rounded corner of the scroll bar track */. box:-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba (0,0, 0, 0.3); border-radius: 10px; background-color: # F5F5F5;}/* defines the shadow + rounded corner in the slider */. box:-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba (0, 0, 0 ,. 3); background-color: #555 ;}

<Div class = "box"> I am a test text with special length, special length, and special length. </div>

Style category

Custom scroll bar source code