Maison > Article > interface Web > paramètre de style de barre de défilement HTML

paramètre de style de barre de défilement HTML

php中世界最好的语言original: 2017-11-22 13:33:374171parcourir

Si vous devez définir une barre de défilement pour DIV, vous devrez peut-être définir le style de la barre de défilement, horizontalement ou verticalement. Vous devez utiliser overflow-y et overflow-. x pour le définir. Aujourd'hui, je vais vous parler de ces deux propriétés.

Définissez les barres de défilement pour le div et définissez ses styles de barre de défilement horizontale et de barre de défilement verticale. Les styles CSS requis sont overflow-y et overflow-x pour définir les effets des barres de défilement droite et inférieure de l'objet div box. En même temps, vous pouvez également utiliser des styles CSS pour masquer la barre de défilement de l'iframe du cadre html,

overflow-y:scroll; affiche toujours la barre de défilement verticale

overflow-y : visible : ne coupez pas le contenu Ne pas ajouter de barre de défilement verticale

Instance de définition de la barre de défilement dans div

En définissant la largeur du div, la hauteur du div, le style de bordure div pour le premier objet DIV et ajout de contenu de texte de démonstration dans la zone DIV, définissez le même style CSS pour la deuxième zone, le même contenu de texte et définissez les barres de défilement horizontales et verticales pour observer l'effet.

La première boîte CSS est nommée "divcs5-a", et le deuxième sélecteur de style de boîte DIV est nommé "div-b".

1. Le code source HTML complet spécifique est le suivant :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>div滚动条 在线演示 </title> 
<style> 
.div-a,.div-b{ width:150px; height:100px; float:left; border:1px solid #F00} 
.div-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;} 
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */ 
</style> 
</head> 
<body> 
<div class="div-a">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div> 
 
<div class="div-b">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div> 
</body> 
</html>

Afin d'observer l'effet, nous définissons le même style CSS et le même contenu de texte pour les deux boîtes DIV. Définissez les deux cases avec des styles de barre de défilement configurés, il n'y a donc pas de débordement. Le côté vertical droit (Y) a un style de barre de défilement qui peut être tiré vers le bas et vers le haut. Le bas horizontal (X) a un effet de barre de défilement mais. ne peut pas être tiré vers la gauche ou la droite. En effet, le contenu du texte ne peut pas être étiré. S'il s'agit d'une

image

plus grande que la largeur du paramètre DIV, un effet de barre de défilement apparaîtra. fond horizontal (X). Recommandations associées :

Comment définir le style de lien avec CSS

Comment utiliser checkbo en HTML Comment modifier l'élément de balise de titre HTML en utilisant

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!

Déclaration：

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

Article précédent：Comment utiliser le poids de la police CSSArticle suivant：Comment utiliser le poids de la police CSS

Articles Liés

Voir plus