recherche
Maisoninterface Webtutoriel CSSComment 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 :

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

Mettez le div externe Après effet :

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

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!

Déclaration
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Tant de liens de couleursTant de liens de couleursApr 13, 2025 am 11:36 AM

Il y a eu une série d'outils, d'articles et de ressources sur la couleur récemment. Veuillez me permettre de fermer quelques onglets en les rassemblant ici pour votre plaisir.

Comment fonctionnent les marges automnales dans FlexboxComment fonctionnent les marges automnales dans FlexboxApr 13, 2025 am 11:35 AM

Robin a déjà couvert cela, mais j'ai entendu une certaine confusion au cours des dernières semaines et j'ai vu une autre personne prendre un coup de poing pour l'expliquer, et je voulais

Les soulignements arc-en-ciel en mouvementLes soulignements arc-en-ciel en mouvementApr 13, 2025 am 11:27 AM

J'adore la conception du site Sandwich. Parmi les nombreuses caractéristiques belles figurent ces titres avec des soulignements arc-en-ciel qui se déplacent lorsque vous faites défiler. Ce n'est pas

Nouvel An, nouvel emploi? Laisse faire un curriculum vitae à propulsion de grille!Nouvel An, nouvel emploi? Laisse faire un curriculum vitae à propulsion de grille!Apr 13, 2025 am 11:26 AM

De nombreux conceptions de CV populaires tirent le meilleur parti de l'espace de page disponible en disant des sections en forme de grille. Utilisons la grille CSS pour créer une disposition qui

Une façon de sortir les utilisateurs de l'habitude de recharger tropUne façon de sortir les utilisateurs de l'habitude de recharger tropApr 13, 2025 am 11:25 AM

Les recharges de page sont une chose. Parfois, nous actualisons une page lorsque nous pensons que cela ne répond pas, ou croyons que un nouveau contenu est disponible. Parfois, nous sommes juste en colère contre

Conception axée sur le domaine avec réactConception axée sur le domaine avec réactApr 13, 2025 am 11:22 AM

Il y a très peu de conseils sur la façon d'organiser des applications frontales dans le monde de la réaction. (Déplacez simplement les fichiers jusqu'à ce qu'il «se sent bien», LOL). La vérité

Détecter les utilisateurs inactifsDétecter les utilisateurs inactifsApr 13, 2025 am 11:08 AM

La plupart du temps, vous ne vous souciez pas vraiment de savoir si un utilisateur est activement engagé ou temporairement inactif sur votre application. Inactif, signifiant, peut-être qu'ils

Wufoo ZapierWufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo a toujours été génial avec les intégrations. Ils ont des intégrations avec des applications spécifiques, comme Campaign Monitor, MailChimp et Typekit, mais ils aussi

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft