欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實現(xiàn)移動端橫向滾動導(dǎo)航條(PC端也適用)

  發(fā)布時間：2021-03-17 12:01:30   作者：小周子1015   我要評論
這篇文章主要介紹了CSS實現(xiàn)移動端橫向滾動導(dǎo)航條(PC端也適用)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

功能由來

近期在做一個H5需要一個橫向滾動條，查看了一些文檔最后還是決定自己寫一個，一個可以兼容Mobile、PC的。

HTML

<body>
    <div class="nav">
        <a href="#">Nav1</a>
        <a href="#">Nav2</a>
        <a href="#">Nav3</a>
        <a href="#">Nav4</a>
        <a href="#">Nav5</a>
        <a href="#">Nav6</a>
        <a href="#">Nav7</a>
        <a href="#">Nav8</a>
        <a href="#">Nav9</a>
        <a href="#">Nav10</a>
        <a href="#">Nav11</a>
        <a href="#">Nav12</a>
        <a href="#">Nav13</a>
        <a href="#">Nav14</a>
        <a href="#">Nav15</a>
    </div>
    <div>
        內(nèi)容區(qū)域
    </div>
</body>

CSS

.nav {
    width: 100%;
    height: 50px;
    line-height: 50px;
    /*段落中文本不換行*/
    white-space: nowrap;
    /*陰影*/
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    /*設(shè)置橫向滾動*/
    overflow-x: scroll;
    /*禁止縱向滾動*/
    overflow-y: hidden;
    /*文本平鋪*/
    text-align: justify;
    /*背景顏色*/
    background: #F4F5F6;
    padding: 0px 5px;
    margin-bottom: 10px;
    /*設(shè)置邊距改變效果為內(nèi)縮*/
    box-sizing: border-box;
}
.nav a {
    color: #505050;
    /*取消超鏈接下劃線*/
    text-decoration: none;
    margin: auto 10px;
}
.nav::-webkit-scrollbar {
    /*隱藏滾動條*/
    display: none;
}

這樣就實現(xiàn)了橫向滾動導(dǎo)航是不是很簡單

到此這篇關(guān)于CSS實現(xiàn)移動端橫向滾動導(dǎo)航條(PC端也適用)的文章就介紹到這了,更多相關(guān)CSS橫向滾動導(dǎo)航條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • css scroll-snap控制滾動元素的實現(xiàn)

    本文主要介紹了css scroll-snap控制滾動元素的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習
    2023-02-22

  • 微信小程序純CSS實現(xiàn)無限彈幕滾動效果

    這篇文章主要介紹了微信小程序純CSS實現(xiàn)無限彈幕滾動效果,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-08-31

  • 使用CSS設(shè)置滾動條樣式

    這篇文章介紹了使用CSS設(shè)置滾動條樣式，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2021-12-20

  • CSS完成視差滾動效果

    這篇文章主要介紹了CSS如何完成視差滾動效果，幫助大家更好的理解和學習使用CSS，感興趣的朋友可以了解下
    2021-04-27

  • CSS實現(xiàn)滾動高度自動變小的粘滯效果實現(xiàn)思路

    粘滯效果是網(wǎng)頁設(shè)計中常見的特效之一，在這篇文章中，我們介紹了如何使用JavaScript監(jiān)聽窗口滾動事件，并根據(jù)滾動高度和下一個區(qū)域的高度來控制導(dǎo)航欄的表現(xiàn)方式，本文結(jié)合
    2023-06-13

最新評論