亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時間：2023-02-22 16:15:40   作者：神奇大叔   我要評論
本文主要介紹了css scroll-snap控制滾動元素的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

scroll-snap解釋

  • 讓網(wǎng)頁容器滾動停止的時候，自動平滑定位到指定元素的指定位置

scroll-snap應用條件

  • 容器必須可滾動

應用場景

  • 輪播圖
  • 全屏滾動圖

使用解析

MDN詳情

滾動容器

sroll-snap-type：none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

  • 定義在滾動容器中的一個臨時點（snap point）如何被嚴格的執(zhí)行
  • 規(guī)定了一個容器是否對內(nèi)部滾動動作進行捕捉，并且規(guī)定了如何去處理滾動結(jié)束狀態(tài)
    • x：滾動容器只捕捉其水平軸上的捕捉位置。
    • block：滾動容器僅捕捉到其塊軸上的捕捉位置。
    • inline：滾動容器僅捕捉到其內(nèi)聯(lián)軸上的捕捉位置。
    • mandatory：強制滾動到某個定位元素
    • proximity：短距離滑動可能會定位到某個元素，也可能就停在滾動位置

一般使用：

scroll-snap-type: x mandatory;

scroll-padding：定義滾動盒子的padding
注意正常的padding在scroll-snap中用來控制停止后相對滾動容器的位置會失效

scroll-snap-stop: normal | always
控制停止元素的行為，normal根據(jù)滾動距離計算要停止的元素，always：無視滾動距離，只會停止在下一個元素，比如滑動1000px還是停止在下一個元素

子元素

scroll-snap-align：start | center | end;
滾動停止后，元素所在的位置，類比justify-content 屬性的 flex-start | flex-end | center
下面三個分別對應start | center | end，表示滾動結(jié)束后元素停止容器開頭、中心、結(jié)尾

在這里插入圖片描述

scroll-margin：定義某個子元素的margin

用于精細控制滾動停止后元素相對于滾動容器的位置

<ul class="snap">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  ...
</ul>　　

.snap {
    overflow-x: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 30px;
}
 
li {
    scroll-snap-align: start;
}

在這里插入圖片描述

代碼示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .section {
            height: 200px;
            width: 400px;
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;

        }

        .section__item {
            /* scroll-snap-align: start; */
            height: 200px;
            width: 200px;
            margin: 0 100px;
            flex: none;
            scroll-padding-right: 40px;
            scroll-snap-align: end;
        }

        .section__item:nth-child(odd) {
            background: red;
        }

        .section__item:nth-child(even) {
            background: green;
        }
    </style>
</head>

<body>
    <div class="section">
        <div class="section__item">Item 1</div>
        <div class="section__item">Item 2</div>
        <div class="section__item">Item 3</div>
        <div class="section__item">Item 4</div>
        <div class="section__item">Item 5</div>
    </div>

    <script>
    </script>
</body>

</html>

到此這篇關(guān)于css scroll-snap控制滾動元素的實現(xiàn)的文章就介紹到這了,更多相關(guān)css scroll-snap控制滾動元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 微信小程序純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)移動端橫向滾動導航條(PC端也適用)

    這篇文章主要介紹了CSS實現(xiàn)移動端橫向滾動導航條(PC端也適用)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編
    2021-03-17

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

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

最新評論