Comment l'attribut overflow de CSS définit les barres de défilement

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);

Compatible

[1] Par défaut, le navigateur IE7 a une barre de défilement verticale par défaut, mais pas les autres navigateurs

//IE7-浏览器 
html{overflow-y: scroll;}
//其他浏览器
html{overflow: auto;}
//去除页面默认滚动条
html{overflow: hidden;}

[2] Le navigateur IE7 et les autres navigateurs ont des mécanismes de réglage de la largeur de la barre de défilement

.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>

Lorsqu'une barre de défilement verticale apparaît dans la boîte parent, la largeur disponible de l'enfant est en fait réduite. La largeur enfant du navigateur IE7 ignore la largeur de la barre de défilement. Si la largeur enfant = 400*100% = 400px, une barre de défilement horizontale apparaît tandis que la largeur enfant des autres navigateurs prend en compte la largeur de la barre de défilement. Largeur enfant = (largeur de la barre de défilement 400)*100 %

Le côté gauche est le navigateur IE7, le côté droit est les autres navigateurs

【3 】 Problème de saut de centrage horizontal

Lorsqu'un élément est centré horizontalement sur la page, une barre de défilement verticale apparaîtra sur la page et un problème de saut de centrage horizontal se produira. La solution est la suivante :

//IE8-默认
html{overflow-y: scroll}//IE9+，100vw表示浏览器的宽度，100%表示可用内容的宽度
.container{padding-left: calc(100vw-100%)}

Personnalisé

【1】IE

Le navigateur IE prend en charge la modification de la couleur personnalisée des composants de la barre de défilement via les styles CSS

scrollbar-face-color 滚动条凸出部分的颜色
scrollbar-shadow-color 立体滚动条阴影的颜色
scrollbar-highlight-color 滚动条空白部分的颜色
scrollbar-3dlight-color 滚动条亮边的颜色
scrollbar-darkshadow-color 滚动条强阴影的颜色
scrollbar-track-color 滚动条的背景颜色 
scrollbar-arrow-color 上下按钮上三角箭头的颜色 
scrollbar-base-color  滚动条的基本颜色

【2】webkit

Le navigateur basé sur le webkit prend en charge les styles personnalisés de barre de défilement, mais contrairement à IE, webkit l'implémente via des pseudo-classes La composition de

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动滑块
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层轨道
::-webkit-scrollbar-corner 边角
::-webkit-scrollbar-button 两端按钮

[Remarque] Lorsque vous définissez le style de largeur et de hauteur de la barre de défilement sous forme de valeur en pourcentage, il est relatif à la taille de la fenêtre

[Remarque] La relation d'empilement des barres de défilement est que la barre de défilement est en bas, suivie de la piste extérieure de la piste et de la piste intérieure de la pièce de piste. Le bouton, le coin et le curseur du pouce ont le niveau supérieur

Quatre : liés à la pseudo-classe

: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!