Maison > Article > interface Web > Comment utiliser la barre de défilement DIV
Comment utiliser la barre de défilement DIV
- php中世界最好的语言original
- 2017-11-20 15:55:401894parcourir
Les barres de défilement DIV peuvent être utilisées dans de nombreux endroits. Aujourd'hui, je vais vous apprendre à utiliser CSS pour faire fonctionner les barres de défilement DIV. Comment masquer et afficher la barre de défilement DIV
Tout d'abord, connaissances de base en CSS
overflow-y:scroll; Toujours afficher la barre de défilement verticale
overflow- y:visible : Ne pas couper le contenu ni ajouter de barre de défilement verticale
En savoir plus : manuel overflow-y http://www.divcss5.com/shouce/c_overflowy.shtml
overflow-x:scroll; Toujours afficher les barres de défilement horizontales
overflow-x:visible : Ne pas couper le contenu ni ajouter de barres de défilement horizontales
En savoir plus : overflow -x manuel http ://www.divcss5.com/shouce/c_overflowx.shtml
En savoir plus sur le débordement CSS
Exemple de barre de défilement de paramètre div
DIVCSS5 En définissant la largeur, la hauteur et le style de bordure div pour le premier objet DIV, et en ajoutant du contenu de texte de démonstration dans la zone DIV, la deuxième zone définit le même style CSS, le même contenu de texte et définit barres de défilement horizontales et verticales, observez 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é "divcss5-b".
1. Le code source HTML complet spécifique est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>div滚动条 在线演示 www.divcss5.com</title>
<style>
.divcss5-a,.divcss5-b{ width:150px; height:100px; float:left; border:1px solid #F00}
.divcss5-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;}
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */
</style>
</head>
<body>
<div class="divcss5-a">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div>
测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</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 la zone DIV, la deuxième zone a un style de barre de défilement défini, donc il n'y a pas de débordement. Le côté vertical droit (Y) a un style de barre de défilement déroulante et déroulante, et le bas horizontal (X) a un style. 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 étendre la largeur du DIV, si l'image est plus grande que la largeur définie du DIV, un effet de barre de défilement apparaîtra en bas horizontal (X). ).
Alors, comment masquer la barre de défilement CSS div ?
DIV n'a pas de barres de défilement par défaut. Si un style de barre de défilement est ajouté, la barre de défilement disparaîtra naturellement après l'avoir supprimée. S'il s'agit d'une barre de défilement qui apparaît dans frame
iframe, si vous souhaitez masquer la barre de défilement horizontalement dans Le style CSS overflow-y:visible ou overflow-y:hidden peut masquer la barre de défilement. Ce qui précède explique comment masquer et afficher la barre de défilement DIV. Les amis intéressés peuvent le faire eux-mêmes.
Lecture connexe :
Quelques détails auxquels il convient de prêter attention dans la mise en page de div+cssComment apprendre DIV+ CSS et le parcours d'apprentissage Résumé et partage des conventions de nommage pour html et DIV+CSS (collection)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!