Les barres de défilement sont souvent visibles sur les pages Web, mais elles ne reçoivent pas suffisamment d'attention. N'effectuez des opérations de débogage que lorsque la compatibilité doit être résolue en raison de problèmes de barre de défilement. Ce chapitre vous apportera le contenu commun des barres de défilement CSS.
1 : Conditions
Les barres de défilement et le débordement sont étroitement liés. Ce n'est que lorsque la valeur du débordement du parent est auto ou scroll et que le contenu de l'élément dépasse la zone de l'élément que la barre de défilement peut apparaître
2 : Par défaut
Quel que soit le navigateur, la barre de défilement par défaut vient de , et non de
. Parce que l'élément a une marge de 8px par défaut. Si la barre de défilement provient de l'élément , il doit y avoir un espace de 8 pixels entre la barre de défilement et la page. En fait, il n'y a pas d'espace, donc la barre de défilement provient de l'élément > Trois : Taille On peut conclure du code suivant que la barre de défilement occupera la largeur disponible du navigateur :chrome/firefox/IE 17px safari 21px
.box{ width: 400px; overflow: scroll; } .in{ *zoom: 1; }
<div class="box"> <div id="in" class="in"></div> </div>
console.log(400-document.getElementById('in').clientWidth);
//IE7-浏览器 html{overflow-y: scroll;} //其他浏览器 html{overflow: auto;} //去除页面默认滚动条 html{overflow: hidden;}
.box{ width: 200px; height: 100px; background-color: pink; overflow: scroll; } .in{ width: 100%; height: 60px; background-color: lightgreen; }
<div class="box"> <div class="in">测试文字</div> </div>
//IE8-默认 html{overflow-y: scroll}//IE9+,100vw表示浏览器的宽度,100%表示可用内容的宽度 .container{padding-left: calc(100vw-100%)}
scrollbar-face-color 滚动条凸出部分的颜色 scrollbar-shadow-color 立体滚动条阴影的颜色 scrollbar-highlight-color 滚动条空白部分的颜色 scrollbar-3dlight-color 滚动条亮边的颜色 scrollbar-darkshadow-color 滚动条强阴影的颜色 scrollbar-track-color 滚动条的背景颜色 scrollbar-arrow-color 上下按钮上三角箭头的颜色 scrollbar-base-color 滚动条的基本颜色
::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动滑块 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层轨道 ::-webkit-scrollbar-corner 边角 ::-webkit-scrollbar-button 两端按钮
:horizontal //horizontal伪类适用于任何水平方向上的滚动条 :vertical //vertical伪类适用于任何垂直方向的滚动条 :decrement //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮 :increment //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮 :start //start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面 :end //end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面 :double-button //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。 :single-button //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。 :no-button no-button伪类表示轨道结束的位置没有按钮。 :corner-present //corner-present伪类表示滚动条的角落是否存在。 :window-inactive //适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。 ::-webkit-scrollbar-track-piece:start { /*滚动条上半边或左半边*/ } ::-webkit-scrollbar-thumb:window-inactive { /*当焦点不在当前区域滑块的状态*/ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /*当鼠标在水平滚动条下面的按钮上的状态*/ }
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!