Comment implémenter une barre de défilement cachée pure CSS+div (exemple de code)

Le contenu de cet article concerne la méthode d'implémentation (exemple de code) permettant de masquer la barre de défilement en CSS+div pur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Lorsque notre contenu dépasse notre div, des barres de défilement apparaissent souvent, affectant l'apparence.

Surtout lorsque nous faisons certains menus de navigation. L'apparition de barres de défilement détruit l'effet UI. Nous ne voulons pas que les barres de défilement apparaissent, et nous ne voulons pas que le contenu au-delà soit exilé, nous devons donc conserver l'effet de défilement de la souris.

Méthode

Voici une méthode simple. L'idée générale est de mettre un autre div en dehors du div. Ce div est défini sur overflow:hidden.

Le div de contenu définit overflow-y: scroll;overflow-x: Hidden;

puis définit la largeur du div externe pour qu'elle soit plus petite que la largeur du div interne.

Ce div interne a en fait une barre de défilement, donc cela n'affecte pas l'effet de défilement de la souris, et nous ne pouvons pas voir la barre de défilement.

Effet

Effet div interne :

Mettez le div externe Après effet :

Code

code css :

        .nav_wrap{
            height: 400px;
            width: 200px;
            overflow: hidden;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
        .nav_ul{
            height: 100%;
            width: 220px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .nav_li{
            border: 1px solid #ccc;
            margin: -1px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
            width: 200px;
        }
        .btn_wrap{
            text-align: center;
        }

code html :

        <div>
        <ul>        
            <li>我是菜单1</li>
            <li>我是菜单2</li>
        </ul>
    </div>

Le menu d'un projet précédent utilisait cette technique. Ce projet utilisait iframe. Cela couvre également la barre de défilement.
Aujourd'hui, j'ai commodément supprimé la barre de défilement du menu de navigation du projet sur lequel je travaille actuellement. Pour résumer brièvement

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!