Shulou(Shulou.com)06/01 Report--

This article mainly introduces the css overflow attribute how to define the scroll bar, the article is very detailed, has a certain reference value, interested friends must read it!

One: conditions

The scroll bar and overflow are closely related. A scroll bar is possible only if the value of the parent overflow is auto or scroll and the content of the element is outside the element area.

Two: default

No matter what browser, the default scroll bar comes from, not from. Because the element has the margin of 8px by default. If the scroll bar comes from an element, the scroll bar should have 8px spacing from the page, but there is actually no spacing, so the scroll bar comes from the element.

Three: dimensions

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

Chrome/firefox/IE17px

Safari21px

.box {

Width:400px

Overflow:scroll

}

.in {

* zoom:1

}

Console.log (400-document.getElementById ('in'). ClientWidth)

Compatible

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

/ / IE7- browser

Html {overflow-y:scroll;}

/ / other browsers

Html {overflow:auto;}

/ / remove the default scroll bar on the page

Html {overflow:hidden;}

[2] IE7- browser is different from other browsers in setting the width of scroll bars.

.box {

Width:200px

Height:100px

Background-color:pink

Overflow:scroll

}

.in {

Width:100%

Height:60px

Background-color:lightgreen

}

Test text

A vertical scroll bar appears in the parent box, which actually reduces the available width of the child in. The child width of the IE7- browser ignores the width of the scroll bar, and when the child width = 400*100%=400px, a horizontal scroll bar appears, while the child width of other browsers takes into account the width of the scroll bar, the child width = (400-scroll bar width) * 100

IE7- browser on the left and other browsers on the right

[3] the problem of horizontal center beating

When an element is centered horizontally on the page, the horizontal center popping problem occurs when a vertical scroll bar appears on the page. The solution is as follows:

/ / IE8- default

Html {overflow-y:scroll} / / IE9+,100vw represents the width of the browser, and 100% represents the width of available content

.container {padding-left:calc (100vwmur100%)}

Custom definition

[1] IE

IE browser supports changing the custom color of the parts of the scroll bar through the CSS style.

The color of the bulge of the scrollbar-face-color scroll bar

The color of the shadow of the scrollbar-shadow-color stereo scroll bar

The color of the blank part of the scrollbar-highlight-color scroll bar

The color of the bright edges of the scrollbar-3dlight-color scroll bar

The color of strong shadows on the scrollbar-darkshadow-color scroll bar

Background color of the scrollbar-track-color scroll bar

The color of the triangular arrow on the top and bottom button of scrollbar-arrow-color

The basic color of the scrollbar-base-color scroll bar

[2] webkit

Browsers in the webkit kernel support custom scrollbar styles, but unlike IE, webkit is made up of pseudo-classes

::-the whole part of the webkit-scrollbar scroll bar

::-webkit-scrollbar-thumb scroll slider

::-webkit-scrollbar-track outer orbit

::-webkit-scrollbar-track-piece inner orbit

::-webkit-scrollbar-corner corner

::-webkit-scrollbar-button buttons at both ends

[note] when the width and height style is set to a percentage value for the scroll bar, it is relative to the window size

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

Four: pseudo-class correlation

: horizontal

/ / the horizontal pseudo-class applies to scroll bars in any horizontal direction.

: vertical

/ / the vertical pseudo-class applies to any vertical scroll bar.

: decrement

/ / decrement pseudo-classes apply to buttons and track fragments. Represents decreasing buttons or track fragments, such as areas and buttons that can move an area up or to the right

: increment

/ / increment pseudo-classes apply to buttons and track fragments. Represents incremental buttons or track fragments, such as areas and buttons that can move an area down or left

: start

/ / start pseudo-classes apply to buttons and track fragments. Indicates whether the object (button rail fragment) is placed in front of the slider

: end

/ / end pseudo-classes apply to buttons and track fragments. Indicates whether the object (button rail fragment) is placed behind the slider

: double-button

/ / double-button pseudo-classes apply to buttons and track fragments. Determine whether the position at the end of the track is a pair of buttons. That is, the orbital fragments are next to a pair of buttons.

: single-button

/ / single-button pseudo-classes apply to buttons and track fragments. Determine whether the position of the end of the track is a button. That is, the orbital debris is next to a separate button.

: no-button

The no-button 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

/ / applies to all scroll bars, indicating the area that contains the scroll bar, and the focus is not on the window.

::-webkit-scrollbar-track-piece:start {

/ * the top or left half of the scroll bar * /

}

::-webkit-scrollbar-thumb:window-inactive {

/ * the state of the slider when the focus is not in the current area * /

}

::-webkit-scrollbar-button:horizontal:decrement:hover {

/ * the state of the mouse over the button below the horizontal scroll bar * /

}

The above is all the content of the article "how the overflow property of css defines the scroll bar". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.