久久精品国产精品国产精品污,亚洲色成人四虎在线观看,亚洲熟妇无码另类久久久,揉她小豆豆揉到失禁H

  • <acronym id="1hxtt"><label id="1hxtt"></label></acronym>
    <pre id="1hxtt"></pre>
    <pre id="1hxtt"><ruby id="1hxtt"></ruby></pre>

    1. 技術頻道導航
      HTML/CSS
      .NET技術
      IIS技術
      PHP技術
      Js/JQuery
      Photoshop
      Fireworks
      服務器技術
      操作系統
      網站運營

      贊助商

      分類目錄

      贊助商

      最新文章

      搜索

      用純CSS創建水平滾動DIV容器【實例】

      作者:admin    時間:2022-9-8 17:35:52    瀏覽:

      水平滾動組件的設計在移動設備上變得尤為常見,有助于降低密集頁面的垂直高度。本文介紹如何用純CSS創建水平滾動DIV容器。

      效果

       用純CSS創建水平滾動DIV容器

      demodownload

      我們的目標是用最少的代碼創建一個水平滾動條,并在所有類型的設備上按預期工作。

      讓我們首先創建我們的容器和在其中水平滾動的子 div。HTML 非常簡單。

      <div class="scrolling-wrapper"> 
        <div class="card"><h2>卡片</h2></div> 
        <div class="card"><h2>卡片</h2></div> 
        <div class="card"><h2>卡片</h2></div> 
        <div class="card"><h2>卡片</h2></div> 
        <div class="card"><h2 >卡片</h2></div> 
        <div class="card"><h2>卡片</h2></div> 
        <div class="card"><h2>卡片</h2></div> 
        <div class="card"><h2>卡片</h2></div> 
        <div class="card"><h2>卡片</h2></div> 
      </div>

      有兩種不同的方法可以使這些 div 水平滾動,你的選擇取決于個人喜好和/或瀏覽器支持。

      white-space 方法

      這是我們需要的所有 CSS,沒有 jQuery,只是簡單地使用了溢出和一個你可能沒聽說過的屬性。

      .scrolling-wrapper {
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;

        .card {
          display: inline-block;
        }
      }

      在我們的容器上,我們想要關閉垂直滾動(overflow-y)并啟用水平滾動(overflow-x)。然后對于每張卡片,我們希望將其設置為使用 inline-block 顯示,以便它們都顯示在一行中。

      你可能不熟悉的 CSS 行是 white-space: nowrap。此屬性用于控制文本環繞容器的方式。在這種情況下,我們希望使用 nowrap 禁用該包裝。

      四行 CSS 屬性,我們得到了一個水平滾動容器。

      至于瀏覽器支持?這是完美的。除非你關心 Internet Explorer 或 Edge。微軟表示,他們可能會將其包含在 Edge 的未來版本中。但目前,它不可用。

      Flexbox 方法

      Flexbox 也可以為我們解決這個問題。

      .scrolling-wrapper-flexbox {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;

        .card {
          flex: 0 0 auto;
        }
      }

      本質上,我們使用 flex-wrap 來實現與上面的 white-space 相同的效果。這兩個屬性在做什么之間沒有真正的區別。

      瀏覽器支持更適合 flexbox 解決方案。你可能需要為舊版瀏覽器引入一些供應商前綴,但至少此解決方案適用于 IE 和 Edge。

      溢出滾動(overflow-scrolling)

      如果你上下滾動,iOS 上的網頁會滾動。如果你快速向上或向下滑動手指,則松開后頁面將繼續滾動。如果你到達頁面的頂部或底部,頁面將在彈回原位之前彈回包裝器的末端。

      對于水平元素,默認情況下,我們不會有那么平滑的滾動。

      幸運的是,它很容易打開。請記住,雖然前綴是 webkit,但這在 iOS 上最為明顯。

      .scrolling-wrapper { 
        -webkit-overflow-scrolling: touch; 
      }

      現在我們在水平容器上進行了黃油般的平滑滾動。這是一個看起來像的例子:

      滾動條

      默認情況下,具有滾動內容的容器將具有滾動條。但是,如果我們不希望那里的滾動條用于 UX 或設計目的怎么辦?那也很簡單。但是,這僅適用于 webkit 瀏覽器。

      .scrolling-wrapper {
        -webkit-overflow-scrolling: touch;
      }

      總結

      隨著這成為一種更常見的設計,將這些片段歸檔是明智的,因為你可能會一遍又一遍地需要它們。很棒的是因為這非常簡單,你可以將其包裝在媒體查詢中并僅針對某些設備顯示水平滾動條。沒有 jQuery 或任何雜亂的東西讓人頭疼。

      相關文章

      標簽: 水平滾動  
      x
      • 站長推薦
      久久精品国产精品国产精品污,亚洲色成人四虎在线观看,亚洲熟妇无码另类久久久,揉她小豆豆揉到失禁H