Configurer le style de la barre de défilement H5-Tutoriel H5-php.cn

Configurer le style de la barre de défilement H5

php中世界最好的语言

Libérer： 2018-03-20 13:45:37

original

3431 Les gens l'ont consulté

Cette fois, je vais vous montrer comment configurer le style de la barre de défilement du H5. Quelles sont les précautions pour configurer le style de la barre de défilement du H5. Ce qui suit est un cas pratique, jetons un coup d'œil.

Cet article présente l'exemple de code pour configurer le style de barre de défilement de H5. J'aimerais le partager avec vous. Les détails sont les suivants :

/* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-track {
    background-color: #b46868;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
} 
/* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-button {
    background-color: #7c2929;
}
/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
::-webkit-scrollbar-corner {
    background-color: black;
} 
// IE 自己的设置方法，并且是第一个可以自定义滚动条的浏览器，从IE5.5开始兼容
body {
    scrollbar-face-color: #b46868;
}
举例
/* Document scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}
<p class="custom-scrollbar">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. 
      Iure id exercitationem nulla qui repellat laborum vitae, 
      molestias tempora velit natus. Quas, assumenda nisi. 
      Quisquam enim qui iure, consequatur velit sit?
    </p>
</p>

Copier après la connexion

Je pense que vous maîtrisez. la méthode après avoir lu le cas dans cet article. Veuillez venir pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation du mode mixte CSS3

H5 implémente plusieurs téléchargements d'aperçus d'images et des contrôles de glissement cliquables

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!