Custom scroll bar Styles---for WebKit browser Google Chrome and Opera

Scroll bar custom styles for Google Chrome and opera browsers

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/89/87/wKiom1gW1b6B7hdZAABGaUfMtsM212.png "title=" Scrollbarparts.png "alt=" Wkiom1gw1b6b7hdzaabgaufmtsm212.png "/>

::-webkit-scrollbar//scroll bar integral section, where the properties are Width,height,background,border (just like a block-level element), and so on. (position 1)::-webkit-scrollbar-button//Buttons at both ends of the scroll bar. You can use Display:none to let it not display, you can also add a background image, color change the display effect. (Position 2)::-webkit-scrollbar-track//Outer track. You can use Display:none to let it not display, you can also add a background image, color change the display effect (position 3)::-webkit-scrollbar-track-piece//Inner track, scroll bar middle section (position 4)::- WEBKIT-SCROLLBAR-THUMB//scroll bar the part that can be dragged (position 5)::-webkit-scrollbar-corner//Corner (position 6)::-webkit-resizer// Define the style of the drag block in the lower right corner (position 7)

Note: When you define width and height for the above section, you have the following function:

If the horizontal scroll bar, the Width property does not work, the Height property is used to control the corresponding portion of the scrollbar vertical direction height;

If the vertical scroll bar, the Height property does not work, the Width property is used to control the horizontal direction of the corresponding portion of the scroll bar.

In Chrome, the sections in the scroll bar are the same as the block-level elements in the DOM. by:-webkit-scrollbar and so on is similar to the original said CSS in the selector. And the properties in {}, you're as simple as controlling a block-level element .

<div id= "scroll" >    <div>         lorem ipsum dolor sit amet, consectetur  adipisicing elit. autem ducimus eum facere fuga impedit ipsa  iure labore laborum magnam maiores, minima minus molestiae  quaerat sed sequi sit veniam voluptatem voluptates.         lorem ipsum dolor sit amet, consectetur adipisicing  elit. Adipisci aliquam asperiores assumenda atque consequuntur,  Cupiditate debitis dignissimos ea error odit provident quae quasi  repudiandae sapiente similique suscipit tenetur ut voluptas.     </div></div> 

position 1,::-webkit-scrollbar //scroll bar integral section, where the properties are Width,height,background,border

#scroll {width:200px;    height:200px; Overflow:auto;}    #scroll::-webkit-scrollbar{width:10px;    border:1px solid #4bb; Background: #ff0;}

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/89/85/wKioL1gW2hfTkEyNAAAetj9NIs8408.png "title=" Qq20161031134239.png "alt=" Wkiol1gw2hftkeynaaaetj9nis8408.png "/>

Position 2,::-webkit-scrollbar-button //The buttons at both ends of the scroll bar. You can use Display:none to make it non-visible .

#scroll::-webkit-scrollbar-button{background: #FF7677;}

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/89/87/wKiom1gW2rHRYHLnAAAeXVeXJ8U927.png "title=" Qq20161031134605.png "alt=" Wkiom1gw2rhryhlnaaaexvexj8u927.png "/>

Position 3,::-webkit-scrollbar-track //Outer track. You can use Display:none to make it non-visible .

#scroll::-webkit-scrollbar-track{background: #FF66D5;}

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/89/87/wKiom1gW20zzMxH2AAAZ0yjIaK4147.png "title=" Qq20161031134831.png "alt=" Wkiom1gw20zzmxh2aaaz0yjiak4147.png "/>

Position 4,::-webkit-scrollbar-track-piece //inner track, scroll bar middle section

#scroll::-webkit-scrollbar-track-piece{background: #eaa;}

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/89/88/wKiom1gW2_yRpricAAAZIKjNmfc158.png "title=" Qq20161031135126.png "alt=" Wkiom1gw2_yrpricaaazikjnmfc158.png "/>

Position 5,::-webkit-scrollbar-thumb //The part of the scroll bar that can be dragged

#scroll::-webkit-scrollbar-thumb{background: #f0f; border-radius:4px;}

650) this.width=650; "Src=" http://s1.51cto.com/wyfs02/M00/89/88/ Wkiom1gw3ifhhg4taaag4sie-og575.png "title=" Qq20161031135344.png "alt=" Wkiom1gw3ifhhg4taaag4sie-og575.png "/>

< Span style= "font-family: ' Microsoft Jas Black ', ' Microsoft Yahei ';" > location 6,::-webkit-scrollbar-corner //corner

 #scroll {    width:200px;     Height:200px;    overflow:auto;} /* must have both horizontal and vertical scroll bars to see corner */#scroll  div{    width:300px;    height : 300px;} #scroll::-webkit-scrollbar{    width:10px;    height:10px;     border:1px solid  #4bb;     background: #ff0;} /* Corner */#scroll::-webkit-scrollbar-corner{    background: #82AFFF;} 

650) this.width=650; "Src=" http://s2.51cto.com/wyfs02/M02/89/88/ Wkiom1gw3e7a6vzxaaabyfetk3e208.png "title=" Qq20161031135618.png "alt=" Wkiom1gw3e7a6vzxaaabyfetk3e208.png "/>

< Span style= "font-family: ' Microsoft Jas Black ', ' Microsoft Yahei ';" > location 7,::-webkit-resizer //define the style of the drag block in the lower right corner

#scroll::-webkit-resizer{/* actual failed to see style effect */background: #000;}

During the learning process, the reference is: http://www.w3cways.com/1670.html

This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1867710

Custom scroll bar Styles---for WebKit browser Google Chrome and Opera