css滚动条1 .默认样式的滚动条引例我们平时创建长方体模型时，父元素包含一些图像和文本内容，而这些图像和文本内容思路:发现在同时给出母元素宽度和高度的时刻，当子元素的宽度或高度超过母元素的宽度或高度时，出现以下效果
因此，可以创建父元素和子元素。 然后将属性添加到父元素的css属性中。
overflow-x :隐藏； 整个上图都会变成这样的效果：
与默认样式的滚动条有关的css属性
属性overflow指定当内容充满元素框时会发生什么。 默认值为visible。
属性值说明样式1 (宽度高度超出范围)样式2 (宽度高度超出范围) visible的默认值。 内容不会被裁剪，而是显示在元素框之外。 隐藏内容已修剪，其余内容不可见。 虽然会裁剪scroll内容，但会在浏览器中显示滚动条，以便您可以查看其馀内容。 修剪自动内容后，浏览器中将显示滚动条，并显示其馀内容。 inherit规定从父元素继承overflow属性的值。 overflow-x属性指定超出元素内容区域时是否剪切左边缘和右边缘的内容。 默认值： visible。
语法：
overflow-x : visible (隐藏)滚动显示； 其中有两个属性与overflow不同：
属性名称说明no-display如果内容不适合内容框，则删除整个框。 如果no-content内容不适合内容框，则隐藏整个内容。 overflow-y属性指定超出元素内容区域时是否剪切顶部/底部的内容。 默认值： visible。
语法：
overflow-y : visible (隐藏)滚动显示； overflow-x :隐藏； overflow-y :隐藏； 这两个语句加起来相当于这一个语句overflow:hidden。再回到引例
再回到例子，我们设置的是
overflow-x :隐藏； 出现了这样的效果：
对照上面的概念，实际效果和概念不一致是怎么回事？
这是由于css中溢出- x和溢出- y之间的兼容性差异造成的。
这里有两条规则：
)1) )“‘overflow-x”和“‘overflow-y”的组合渲染由所有浏览器按照规范处理。
)2) .“‘overflow-x : ‘hidden且“‘‘overflow-y : visible”时，在IE6 IE7 IE8中，“overflow-y”为“隐藏”
即，单独语句：
overflow-x :隐藏； 实际上
overflow-x :隐藏； overflow-y :自动； 怎么解决这个问题？
)1) .同时设置“‘overflow-x”和“‘overflow-y”的值，使一个为“‘hidden”，另一个为“‘visible”；
(2)、设置“溢出”的值
)3) .避免编写依赖于指定值为“‘visible”的“‘overflow-x”和“‘overflow-y”特性的计算值的代码。
在这里我们还需要注意的是：父级元素的宽高必须提前设置，如果不规定好父级元素的宽高，滚动条可能不会出现。
2 .实现自定义滚动条实现自定义滚动条对于webkit内核浏览器，此部分使用伪类更改滚动条的默认样式。
滚动条的组成部分
:-webkit-scrollbar滚动条的整体部分：3360-WebKit-scroll bar-thumb滚动条中的小方块， 3:3360-WebKit-scroll bar-track滚动条轨道(其中包含Thumb ) 33603360-WebKit-scroll bar-button滚动条轨道两端的按钮单击小框的位置可获得：3360-WebKit-scroll bar-track-piece内层轨道、滚动条的中间部分33603360-WebKit-scroll bar-corner角
三、小练习！ doctypehtmlhtmlheadmetacharset=' utf-8 ' title/titlestyletype=' text/CSS '.content { width :110 px； height:110px； border :1 px固态黑； overflow-x :隐藏； }.content :3360-WebKit-scroll bar { width :8 px； }样式/headbodydivclass=' content ' afriendinneedisafriendindeed.afriendinneedisafriendindeed.afriendinnneeeedisafriendied.afriended riend indeed.afriendinneedisafriendindeed./div/body/html效果图如下：
(1)在. style标记中添加以下css样式时) :
. content :3360-WebKit-scroll bar-thumb { border-radius 33604 px； //box-shadow用于添加阴影，即使不添加此属性，box-shadow : inset 005 px rgba (0、0、0.2 )； 后台： rgba (0、0、0、0.2 )； }效果图如下：
)2)如果继续将以下css样式添加到. style标记中，则为：
. content :3360-WebKit-scroll bar-track {/box-shadow }用于添加阴影，无需添加此属性后台： rgba (0、0、0、0.1 )； }效果图为：
)3)如果继续将以下css样式添加到. style标记中，则为：
. content :3360-WebKit-scroll bar-button { background-image : URL (img8.jpg )； 背景尺寸：8 px 8px； 后台- repeat :否- repeat； }效果图为：