国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Scrollbar平滑滾到指定位置

AlphaWallet / 3421人閱讀

摘要:背景近期項目需求實現同一頁面內進行導航跳轉。一開始想到的是通過描點定位,但是跳轉效果不好,沒有過渡的動畫。于是自己封裝了一個跳轉函數,支持立刻跳轉線性過渡先快后慢緩動三種跳轉方式。此模塊由原生編寫,不依賴其他插件庫。

背景

近期項目需求實現同一頁面內進行導航跳轉。一開始想到的是通過描點定位,但是跳轉效果不好,沒有過渡的動畫。后來試了scrollIntoView和scroll-behavior: smooth,一方面瀏覽器兼容性不好,另一方面無法控制過渡時間,內容很多時跳轉太慢。于是自己封裝了一個跳轉函數,支持立刻跳轉、線性過渡、先快后慢(緩動)三種跳轉方式。此模塊由原生JS編寫,不依賴其他插件庫。

演示

詳見:https://theoxiong.github.io/s...

安裝方法
$   npm install scroll-ease-efficient 
使用
// 支持 CommonJs/ES6/Script 三種引入
// 1. CommonJs 
const { scrollTo } = require("scroll-ease-efficient")
// 2. ES6
import { scrollTo } from "scroll-ease-efficient"
// 3. Script


// scrollable element
let scrollEle = document.getElementById("id")

// 基本用法
scrollTo(scrollEle, 500)

// 指定過渡時間(單位ms)
scrollTo(scrollEle, 500, { duration: 500})

// 指定過渡動畫效果, 支持"gradually"/"liner"/"instant"
scrollTo(scrollEle, 500, { timingFunction: "gradually"})

// 指定過渡時間和動畫效果
scrollTo(scrollEle, 500, { timingFunction: "liner", duration: 500})

// 指定緩動因子, 只對"gradually"方式有效
scrollTo(scrollEle, 500, { timingFunction: "gradually", factor: 6})
函數說明

function scrollTo (ele, pos, [options])

ele target scrollable element

pos specified the position which scroll to

options

timingFunction specify velocity curve of scrolling, default value is "linear"

duration specify time of scrolling, default value is 1000

factor specify the factor of gradually scrolling, it is only for gradually mode, should less then 100, and more then 1

項目地址:https://github.com/TheoXiong/... ??歡迎star

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/100121.html

相關文章

  • css隱藏移動端滾動條并且ios上平滑滾動

    摘要:完整代碼如下移動端隱藏滾動條解決方案解決上滑動不流暢推薦娃娃日用品美妝護膚娃娃日用品美妝護膚娃娃 HTML代碼如下 移動端隱藏滾動條解決方案 * { padding: 0; margin: 0; } .par-type { height: 50px; ...

    wangzy2019 評論0 收藏0
  • css隱藏移動端滾動條并且ios上平滑滾動

    摘要:完整代碼如下移動端隱藏滾動條解決方案解決上滑動不流暢推薦娃娃日用品美妝護膚娃娃日用品美妝護膚娃娃 HTML代碼如下 移動端隱藏滾動條解決方案 * { padding: 0; margin: 0; } .par-type { height: 50px; ...

    Karrdy 評論0 收藏0
  • 完美實現一個“回到頂部”

    摘要:在瀏覽器中,頁面默認滾動是在標簽上,移動端大多數在標簽上,在我們想要實現平滑回到頂部,只需在這兩個標簽上都加上準確的說,寫在容器元素上,可以讓容器非鼠標手勢觸發的滾動變得平滑,而不局限于,標簽。 前言 在實際應用中,經常用到滾動到頁面頂部或某個位置,一般簡單用錨點處理或用js將document.body.scrollTop設置為0,結果是頁面一閃而過滾到指定位置,不是特別友好。我們想要...

    layman 評論0 收藏0

發表評論

0條評論

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