Table des matières
前面的话
条件
默认
尺寸
兼容
自定义
Maison interface Web tutoriel HTML CSS滚动条_html/css_WEB-ITnose

CSS滚动条_html/css_WEB-ITnose

Jun 24, 2016 am 11:23 AM
barre de défilement CSS

× 目录 [1]条件 [2]默认 [3]尺寸 [4]兼容 [5]自定义

前面的话

  滚动条在网页中经常见到,却并没有受到足够的重视。只有当因为滚动条的问题需要处理兼容性时,才进行调试操作。本文将就滚动条的常见内容进行梳理。

 

条件

  滚动条和overflow是紧密相关的。只有当父级的overflow的值是auto或scroll,并且元素的内容超出元素区域时,才有可能出现滚动条

 

默认

  无论什么浏览器,默认滚动条均来自,而不是

。因为元素默认有8px的margin。若滚动条来自元素,则滚动条与页面则应该有8px的间距,实际上并没有间距,所以滚动条来自元素

 

尺寸

  通过以下代码可得出滚动条会占用浏览器的可用宽度为:

chrome/firefox/IE 17pxsafari 21px
Copier après la connexion

.box{    width: 400px;    overflow: scroll;}.in{    *zoom: 1;}
Copier après la connexion

<div class="box">    <div id="in" class="in"></div></div>
Copier après la connexion

console.log(400-document.getElementById('in').clientWidth);
Copier après la connexion

兼容

【1】默认情况下IE7-浏览器默认有一条纵向滚动条,而其他浏览器则没有

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

【2】IE7-浏览器与其他浏览器关于滚动条的宽度设定机制不同

.box{    width: 200px;    height: 100px;    background-color: pink;    overflow: scroll;}.in{    width: 100%;    height: 60px;    background-color: lightgreen;}
Copier après la connexion

<div class="box">    <div class="in">测试文字</div></div>
Copier après la connexion

  父级box出现纵向滚动条,实际上子级in的可用宽度就缩小了。IE7-浏览器的子级宽度忽略了该滚动条的宽度,子级宽度=400*100%=400px,则出现了横向滚动条;而其他浏览器的子级宽度考虑到该滚动条的宽度,子级宽度=(400-滚动条宽度)*100%

  左图为IE7-浏览器,右图为其他浏览器

【3】水平居中跳动问题

  当一个元素在页面中水平居中时,页面中出现纵向滚动条会发生水平居中的跳出问题。解决方法如下:

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

自定义

【1】IE

  IE浏览器支持通过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  滚动条的基本颜色
Copier après la connexion

【2】webkit

  webkit内核的浏览器支持滚动条自定义样式,但和IE不同,webkit是通过伪类来实现的

组成

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

  [注意]当为滚动条设置宽高样式为百分比值时,是相对视窗大小来说的

  [注意]滚动条的层叠关系为scrollbar在最底层,往上依次是track外层轨道,track-piece内层轨道。而button按钮、corner边角和thumb滑块有最顶层

伪类相关

:horizontal//horizontal伪类适用于任何水平方向上的滚动条:vertical//vertical伪类适用于任何垂直方向的滚动条:decrement//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮:increment//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮:start//start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面:end//end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面:double-button//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。:single-button//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。:no-buttonno-button伪类表示轨道结束的位置没有按钮。:corner-present//corner-present伪类表示滚动条的角落是否存在。:window-inactive//适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。::-webkit-scrollbar-track-piece:start {/*滚动条上半边或左半边*/}::-webkit-scrollbar-thumb:window-inactive {/*当焦点不在当前区域滑块的状态*/}::-webkit-scrollbar-button:horizontal:decrement:hover {/*当鼠标在水平滚动条下面的按钮上的状态*/}
Copier après la connexion

常用设置

.box{    width: 200px;    height: 100px;    background-color: pink;    overflow: scroll;    font-size: 20px;    line-height: 40px;}/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/.box::-webkit-scrollbar{    width: 16px;    height: 16px;    background-color: #F5F5F5;}/*定义滚动条轨道 内阴影+圆角*/.box::-webkit-scrollbar-track{    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    border-radius: 10px;    background-color: #F5F5F5;}/*定义滑块 内阴影+圆角*/.box::-webkit-scrollbar-thumb{    border-radius: 10px;    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    background-color: #555;}
Copier après la connexion

<div class="box">我是特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长的测试文字</div>
Copier après la connexion

样式类举

  自定义滚动条源码

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Mar 04, 2025 pm 12:32 PM

Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Mar 04, 2025 pm 02:39 PM

Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Mar 12, 2025 pm 04:05 PM

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

See all articles