摘要:背景近期項目需求實現同一頁面內進行導航跳轉。一開始想到的是通過描點定位,但是跳轉效果不好,沒有過渡的動畫。于是自己封裝了一個跳轉函數,支持立刻跳轉線性過渡先快后慢緩動三種跳轉方式。此模塊由原生編寫,不依賴其他插件庫。
背景
近期項目需求實現同一頁面內進行導航跳轉。一開始想到的是通過描點定位,但是跳轉效果不好,沒有過渡的動畫。后來試了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
options
timingFunction
duration
factor
項目地址:https://github.com/TheoXiong/... ??歡迎star
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/100121.html
摘要:完整代碼如下移動端隱藏滾動條解決方案解決上滑動不流暢推薦娃娃日用品美妝護膚娃娃日用品美妝護膚娃娃 HTML代碼如下 移動端隱藏滾動條解決方案 * { padding: 0; margin: 0; } .par-type { height: 50px; ...
摘要:完整代碼如下移動端隱藏滾動條解決方案解決上滑動不流暢推薦娃娃日用品美妝護膚娃娃日用品美妝護膚娃娃 HTML代碼如下 移動端隱藏滾動條解決方案 * { padding: 0; margin: 0; } .par-type { height: 50px; ...
摘要:在瀏覽器中,頁面默認滾動是在標簽上,移動端大多數在標簽上,在我們想要實現平滑回到頂部,只需在這兩個標簽上都加上準確的說,寫在容器元素上,可以讓容器非鼠標手勢觸發的滾動變得平滑,而不局限于,標簽。 前言 在實際應用中,經常用到滾動到頁面頂部或某個位置,一般簡單用錨點處理或用js將document.body.scrollTop設置為0,結果是頁面一閃而過滾到指定位置,不是特別友好。我們想要...
閱讀 1634·2021-10-25 09:46
閱讀 3229·2021-10-08 10:04
閱讀 2376·2021-09-06 15:00
閱讀 2777·2021-08-19 10:57
閱讀 2084·2019-08-30 11:03
閱讀 980·2019-08-30 11:00
閱讀 2384·2019-08-26 17:10
閱讀 3554·2019-08-26 13:36