2023年6月20日发(作者：)
css滚动条css滚动条⼀.默认样式的滚动条引例：我们平时编写盒模型时，如果想要实现定义⼀个⽗级元素中装着⼀些图⽚或⽂本内容，让这些图⽚或⽂本内容呈现出有滚动条样式的效果，应该怎样实现呢?思路：我们知道，在⽗级元素的宽⾼都给定时，⼦级元素的宽或者⾼超出了⽗级元素的宽或者⾼，会呈现出如下效果:因此我们可以先编写好⽗级元素和⼦级元素。然后再在⽗级元素的css属性中添加⼀条属性：overflow-x:hidden;然后整个上图就会改变成这样的效果：与默认样式的滚动条有关的css属性overflow这⼀属性指定如果内容溢出⼀个元素的框，会发⽣什么。它的默认值是visible。属性值描述样式1（宽⾼超出范围时）样式2（宽⾼未超范围）visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。属性值描述样式1（宽⾼超出范围时）样式2（宽⾼未超范围）scroll内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。inherit规定应该从⽗元素继承 overflow 属性的值。overflow-x属性指定如果它溢出了元素的内容区是否剪辑左/右边缘内容。默认值：visible。语法:overflow-x: visible|hidden|scroll|auto|no-display|no-content;这⾥与overflow不同的属性有两个：属性名no-displayno-content描述如果内容不适合内容框，则删除整个框。如果内容不适合内容框，则隐藏整个内容。overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。默认值：visible。语法：overflow-y: visible|hidden|scroll|auto|no-display|no-content;overflow-x:hidden;overflow-y:hidden;这两条语句放在⼀起相当于这⼀条语句overflow:hidden;再回到引例重新回到引例，发现我们设置的仅仅是overflow-x:hidden;就呈现出了这样的效果:按照上⾯的概念来看，实际效果与概念并不相符，这是怎么回事呢?这是由于css中overflow-x与overflow-y的兼容性不同导致的。这⾥有两条规则:(1).对于 ‘overflow-x’ 和 ‘overflow-y’ 的组合渲染，所有浏览器均依照规范处理；(2).当 ‘overflow-x : hidden’ 且 ‘overflow-y : visible’ 时，IE6 IE7 IE8 中将 ‘overflow-y’ 渲染为 ‘hidden’，其它浏览器则渲染为 ‘auto’；也就是说单独的⼀条语句:overflow-x:hidden;实际上相当于overflow-x:hidden;overflow-y:auto;怎么解决这⼀问题呢?(1).同时设置 ‘overflow-x’ 和 ‘overflow-y’ 的值，不要出现其中之⼀为 ‘hidden’ 时，⽽另⼀个是 ‘visible’ 的情况；(2).设置’overflow’ 的值(3).避免编写依赖指定值为 ‘visible’ 的 ‘overflow-x’ 和 ‘overflow-y’ 特性的计算值的代码。在这⾥我们还需要注意的是：⽗级元素的宽⾼必须提前设置，如果不规定好⽗级元素的宽⾼，滚动条可能不会出现。⼆.⾃定义滚动条实现⾃定义滚动条实现此部分针对webkit内核的浏览器，使⽤伪类来改变滚动条的默认样式。滚动条组成部分1. ::-webkit-scrollbar 滚动条整体部分2. ::-webkit-scrollbar-thumb 滚动条⾥⾯的⼩⽅块，能向上向下移动（或向左向右移动）3. ::-webkit-scrollbar-track 滚动条的轨道（⾥⾯装有Thumb）4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调⼩⽅块的位置。5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分6. ::-webkit-scrollbar-corner 边⾓，即垂直滚动条和⽔平滚动条相交的地⽅7. ::-webkit-resizer 两个滚动条的交汇处上⽤于拖动调整元素⼤⼩的⼩控件如下图所⽰：三.⼩练习