純粋な css+div の隠しスクロール バーを実装する方法 (コード例)

この記事の内容は純粋なCSS divでスクロールバーを非表示にする実装方法(コード例)です。必要な方は参考にしていただければ幸いです。

コンテンツが div を超えると、スクロール バーが表示され、外観に影響を与えることがよくあります。

特にナビゲーション メニューを作成しているとき。スクロール バーが表示されると、UI 効果が損なわれます。スクロール バーを表示したくないし、その先のコンテンツが追放されることも望まないため、マウスのスクロール効果を保持する必要があります。

方法

これは簡単な方法です。一般的な考え方は、div の外側に別の div を配置することです。この div は overflow:hidden に設定されます。

そして、コンテンツ div は、overflow-y:scroll;overflow-x:hidden;

次に、外側の div の幅を内側の div の幅より小さく設定します。

この内部 div には実際にはスクロール バーがあるため、マウスのスクロール効果には影響せず、スクロール バーは表示されません。

エフェクト

内側の div エフェクト:

#外側の div エフェクトを配置します。 :

##コード

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;
        }

HTML コード:

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

以前のプロジェクトのメニューではこの手法が使用されていました。そのプロジェクトでは iframe が使用されていました。また、スクロールバーも覆われます。

今日、現在作業中のプロジェクトのナビゲーション メニューのスクロール バーを都合よく削除しました。簡単にまとめると

#

以上が純粋な css+div の隠しスクロール バーを実装する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。