Comment utiliser la barre de défilement DIV-tutoriel HTML-php.cn

Comment utiliser la barre de défilement DIV

php中世界最好的语言

Libérer： 2017-11-20 15:55:40

original

1975 Les gens l'ont consulté

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>

Copier après la connexion

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+css

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