CSS scroll bar

xTable of Contents [1] conditions [2] default [3] size [4] compatible [5] custom before

Scroll bars are often seen in Web pages, but are not given enough attention. The debug operation occurs only if the issue of the scrollbar requires processing compatibility. This article will comb the common content of the scroll bar.

conditions

Scroll bars and overflow are closely related. Scroll bars may appear only if the parent's overflow value is auto or scroll, and the content of the element is outside the element area

Default

No matter what browser, the default scroll bar is from

Dimensions

The following code allows you to draw a scroll bar that occupies the browser's available width:

chrome/firefox/IE 17pxsafari 21px

. Box {    width: 400px;     Overflow: scroll;} . in {    *zoom: 1;}

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

Console.log (400-document.getelementbyid (' in '). clientwidth);

Compatible

"1" By default, the Ie7-browser has a vertical scroll bar, while the other browsers do not have

//ie7-Browser HTML {overflow-y: scroll;} //Other browser HTML {overflow: auto;} //Remove page default scroll bar HTML {overflow: hidden;}

"2" ie7-browser is different from other browsers about the width setting mechanism of the scroll bar

 .box  { width :  200px ; :  100px ;  Background-color :  pink ;  overflow :  scroll ;} .in  {:  100% ; :  60px ;  Background-color :  LightGreen ;} 

<class= "box">    <class= "in"  > Test text </div></div> 

A vertical scroll bar appears in the parent box, and the available width of the child in is reduced. ie7-the child width of the browser ignores the width of the scrollbar, the child width is =400*100%=400px, the horizontal scroll bar appears, and the other browser's child width takes into account the width of the scrollbar, the child width = (400-scrollbar width) *100%

Left image is ie7-browser, right image is other browser

"3" Horizontal Center runout problem

When an element is centered horizontally in the page, a vertical scroll bar in the page appears with a horizontal center bounce problem. Here's how to fix it:

//ie8-Default HTML {overflow-y: scroll} //IE9+,100VW represents the width of the browser, and 100% indicates the width of the available content. Container {padding-left: calc (100vw-100%)}

Custom

"1" IE

IE browser supports changing the custom color of the scrollbar's widgets via CSS styles

scrollbar-face-color ofThe extruded portion of a color scrollbar scrollbar-shadow-color of a solid scrollbar shadow scrollbar-highlight-color The color of the blank part of the scrollbar scrollbarThe color of the -3dlight-colorscrollbar scrollbar-darkshadow-the colorof the strong shadow of the color scroll bar scrollbar- track-colorscroll bar background color scrollbar-arrow-colors Upper and lower buttons on the triangle Arrows ScrollBar-base-color  Basic color of scroll bar

"2" WebKit

WebKit Kernel browser supports scroll bar custom style , but unlike IE, WebKit is implemented by pseudo-class.

Composition

::-webkit-scrollbar scroll bar integral part::-webkit-scrollbar-Thumb scroll slider::-webkit-scrollbar-Track outer orbit:: -webkit-scrollbar-track-piece inner track::-webkit-scrollbar-Corner Corner::-webkit-scrollbar-button Both buttons

[note] When you set the width height style to a percentage value for the scrollbar, it is relative to the window size

[note] The cascade relationship of the scrollbar is scrollbar at the lowest level, which is the track outer orbit, track-piece the inner orbit. The button buttons, corner corners, and thumb sliders have the top level

Pseudo-Class related

: Horizontal//Horizontal pseudo-class applies to scroll bars in any horizontal direction: Vertical//Vertical Pseudo-class applies to any vertical scroll bar:d ecrement//the decrement pseudo-class applies to button and track fragments. Represents a descending button or track fragment, such as an area and a button that can make the area move up or to the right: Increment//the increment pseudo-class applies to button and track fragments. Represents an incremented button or track fragment, such as an area and a button that can make the area move down or to the left: Start//the start pseudo-class applies to button and track fragments. Indicates whether the object (Button track fragment) is placed in front of the slider: End//the end pseudo-class applies to button and track fragments. Indicates whether the object (Button track fragment) is placed behind the slider:Double-Button//the Double-button pseudo-class applies to button and track fragments. Determines whether the position of the end of the track is a pair of buttons. That is, the track fragment is next to a pair of buttons. : Single-Button//the Single-button pseudo-class applies to button and track fragments. Determines whether the position of the end of the track is a button. That is, the orbital fragment is next to a separate button. : No-Buttonno-the button pseudo-class represents the position where the track ended without buttons. : Corner-present//the corner-present pseudo-class indicates whether the corners of the scroll bar exist. : Window-Inactive//applies to all scroll bars, representing the area that contains the scrollbar, when the focus is not in the window. ::-webkit-scrollbar-track-Piece:start {/*Upper half or left half of scroll bar*/}::-webkit-scrollbar-thumb:window-Inactive {/*when the focus is not in the state of the current region slider*/}::-webkit-scrollbar-Button:horizontal:decrement:hover {/*The state of the button on the bottom of the horizontal scroll bar when the mouse*/}

Common settings

. Box{width:200px;Height:100px;Background-color:Pink;Overflow:Scroll;font-size:20px;Line-height:40px;}/*defines the width of the scrollbar and the background aspect corresponding to the size of the scroll bar, respectively*/. Box::-webkit-scrollbar{width:16px;Height:16px;Background-color:#F5F5F5;}/*define a scrollbar track inner Shadow + fillet*/. Box::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba (0,0,0,0.3);Border-radius:10px;Background-color:#F5F5F5;}/*Define a Shadow + fillet within a slider*/. Box::-webkit-scrollbar-thumb{Border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba (0,0,0,.3);Background-color:#555;}

<class= "box"> I am a particularly long, special long, special long, special long, special long, special length, special long, special long, special length, special long, long, long, special length.  </div>

Style class lift

Custom scroll bar Source code

CSS scroll bar