2 façons d'implémenter CSS pour masquer les barres de défilement et faire défiler le contenu

Masquer les barres de défilement et doit également prendre en charge le défilement. Nous rencontrons souvent cette situation dans le développement front-end. La chose la plus simple à penser est d'ajouter un plug-in iscroll, mais maintenant CSS peut également réaliser cette fonction. Ce chapitre vous présentera 2 méthodes pour implémenter CSS pour masquer la barre de défilement et faire défiler le contenu. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Méthode 1 : Calculer la largeur de la barre de défilement et la masquer

Code html :

<div class="outer-container">
    <div class="inner-container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero.
     </div>
</div>

Code css :

.outer - container {
	width: 360 px;height: 200 px;position: relative;overflow: hidden;
}
.inner - container {
	position: absolute;left: 0;top: 0;right: -17 px;bottom: 0;overflow - x: hidden;overflow - y: scroll;
}

Rendu (avant défilement) :

Rendu (après défilement) :

Ce code déplace intelligemment 17 pixels vers la droite, ce qui est exactement égal à la largeur de la barre de défilement. Cette valeur a été obtenue par débogage manuel. Aucun problème trouvé dans Chrome et IE.

Méthode 2 : Entouré de trois conteneurs, pas besoin de calculer la largeur de la barre de défilement

Le code est le suivant :

<div class="outer-container">
     <div class="inner-container">
        <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero.
        </div>
     </div>
 </div>

.element, .outer-container {  width: 200px;  height: 200px;}
.outer-container {  border: 5px solid purple;  position: relative;  overflow: hidden;}
.inner-container {  position: absolute;  left: 0;  overflow-x: hidden;  overflow-y: scroll;}
.inner-container::-webkit-scrollbar {  display: none;}

Rendu (avant défilement) :

Rendu (après défilement) :

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!