亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS scroll snap points 實現(xiàn)漸進增強的滾動

CloudDeveloper / 1071人閱讀

摘要：漸近增強剛好最近看到這篇文章，如果結(jié)合每次滾動的時候每個條目始終在中間這樣效果就更好了。效果如下查看瀏覽器支持情況遺憾的是目前只有和上的和原生支持需要前綴，好在這種可以當(dāng)做漸進增強，即使瀏覽器不支持也不影響功能。

前言

前幾天在 segmentfault 上看到有人問下面這個效果（segmentfault app 中的）怎么實現(xiàn)，感覺這個效果體驗還不錯（在移動端沒有滾動條的情況能夠提示有更多內(nèi)容可以滾動），就用 overflow-x: auto + width: 80% 在 codepen 上寫了個 demo。

漸近增強

剛好最近看到這篇文章 Introducing CSS Scroll Snap Points ，如果結(jié)合 Scroll snap points 每次滾動的時候每個條目始終在中間這樣效果就更好了。

.snap-slider {
    overflow-x: auto;
    
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: mandatory;

  scroll-snap-destination: 50% 0;
    &__scroller {
        display: table;
        text-align: center;
    }
    &__item {
        scroll-snap-coordinate: 50% 0%;
        
        display: table-cell;
        line-height: 150px; font-size: 2em;
        
        &:not(:first-child) {
            border-left: 1px solid #ccc;
        }
    }
    &__width {
        width: 80vw;
    }
}

屬性的具體介紹，參考本文最后的參考鏈接。

效果如下：

查看 Demo

瀏覽器支持情況

遺憾的是目前(7/9/2016)只有 Firefox 和 iOS 上的 Safari 和 Chrome 原生支持（需要前綴），好在這種可以當(dāng)做漸進增強，即使瀏覽器不支持也不影響功能。

PS：這里有個 polyfill，但是本例中加了似乎不起作用。

參考

https://css-tricks.com/introducing-css-scroll-snap-points/

https://webkit.org/blog/4017/scroll-snapping-with-css-snap-points/

http://codepen.io/collection/XjOwrq/

原文地址：https://uedsky.com/2016-07/css-scroll-snap-points/
獲取最佳閱讀體驗并參與討論，請訪問原文

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111347.html

相關(guān)文章

  • 譯-使用Scroll Snapping實現(xiàn)CSS控制頁面滾動

    摘要：過去滾動捕捉只能通過實現(xiàn)，但現(xiàn)在得益于新的滾動捕捉模塊，這種效果已經(jīng)可以通過實現(xiàn)了。同時令人慶幸的是瀏覽器可以根據(jù)用戶的滾動方式自動控制并判斷是否利用捕捉點捕捉。 特別聲明，本文翻譯自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于譯者能力，譯文或存在不足，歡迎大家指出。如需轉(zhuǎn)載，煩請注明出處。 滾...

    lastSeries 評論0 收藏0

  • 譯-使用Scroll Snapping實現(xiàn)CSS控制頁面滾動

    摘要：過去滾動捕捉只能通過實現(xiàn)，但現(xiàn)在得益于新的滾動捕捉模塊，這種效果已經(jīng)可以通過實現(xiàn)了。同時令人慶幸的是瀏覽器可以根據(jù)用戶的滾動方式自動控制并判斷是否利用捕捉點捕捉。 特別聲明，本文翻譯自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于譯者能力，譯文或存在不足，歡迎大家指出。如需轉(zhuǎn)載，煩請注明出處。 滾...

    Tychio 評論0 收藏0

  • JS進階篇--iscroll.js的使用

    摘要：最好給瀏覽器或者毫秒的間隙再去初始化。他們控制滾動周期毫秒級別和動畫的擦除效果。重新繪制階段不是瞬時發(fā)生的只是范圍結(jié)束時觸發(fā)。注如果你有一個相當(dāng)復(fù)雜的結(jié)構(gòu)，你應(yīng)該給瀏覽器更多的執(zhí)行事件，可以設(shè)置到毫秒的超時時間。使用方法注冊事件。 入門 Scroll是一個類，每個需要使用滾動功能的區(qū)域均要進行初始化。每個頁面上的iScroll實例數(shù)目在設(shè)備的CPU和內(nèi)存能承受的范圍內(nèi)是沒有限制的。 盡...

    Genng 評論0 收藏0

  • Iscroll解析

    摘要：處理函數(shù)處理函數(shù)都是和檢測事件對應(yīng)的，每一類檢測事件都有相應(yīng)的處理函數(shù)。為時，會將等事件綁定到的對象?？赏ㄟ^對進行銷毀。注冊事件，可注冊的函數(shù)類型為下一小節(jié)函數(shù)。 做了一些移動端的產(chǎn)品，發(fā)現(xiàn)一些滾動效果很多會使用 iscroll 作為底層庫（如阿里小蜜）。iscroll 的文檔已經(jīng)好久沒更新了，而且比較簡單，經(jīng)常需要直接讀源碼。這里寫一篇總結(jié)，作為對 iscroll API的整理。而 ...

    weapon 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<