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

資訊專欄INFORMATION COLUMN

記 · 滾動(dòng)條滾動(dòng)到指定位置(錨點(diǎn))的不同實(shí)現(xiàn)方式

kidsamong / 2041人閱讀

摘要：那什么是錨點(diǎn)問題呢錨點(diǎn)是網(wǎng)頁制作中超級(jí)鏈接的一種，又叫命名錨記。命名錨記像一個(gè)迅速定位器一樣是一種頁面內(nèi)的超級(jí)鏈接，運(yùn)用相當(dāng)普遍。這是標(biāo)簽提供給我們的錨點(diǎn)解決方式。滾動(dòng)條緩慢滾動(dòng)到此為止，一個(gè)完整的錨點(diǎn)緩慢滾動(dòng)就完成了，快去試試吧


最近項(xiàng)目中遇到傳統(tǒng)的錨點(diǎn)問題。那什么是錨點(diǎn)問題呢？

錨點(diǎn) 是網(wǎng)頁制作中超級(jí)鏈接的一種，又叫命名錨記。命名錨記像一個(gè)迅速定位器一樣是一種頁面內(nèi)的超級(jí)鏈接，運(yùn)用相當(dāng)普遍。并且可以對(duì)網(wǎng)站內(nèi)容通過菜單進(jìn)行快速定位。

上圖所示為錨點(diǎn)示意圖，那這種需求我們?cè)趺磳?shí)現(xiàn)呢？下面我就來提供一些在不同場(chǎng)景下，可以使用的錨點(diǎn)方式。

1.first blood

在傳統(tǒng)開發(fā)過程中，我們的錨點(diǎn)都是通過a標(biāo)簽跳轉(zhuǎn)至對(duì)應(yīng)ID的形式進(jìn)行需求實(shí)現(xiàn)的。

Menu1
Menu2


Content1


Content2

這是a標(biāo)簽提供給我們的錨點(diǎn)解決方式。

2.double kill

原生js去獲取并修改scrollTop

這種情況，我們一般用于固定頁面元素的錨點(diǎn)設(shè)置，或者設(shè)置返回頂部按鈕。

// 通過element.scrollTop來獲取當(dāng)前元素滾動(dòng)條高度
// 可以在控制臺(tái)輸出下
document.documentElement.scrollTop  ====> number  
// 返回一個(gè)number類型的內(nèi)容，是滾動(dòng)條的高度


// 也可以通過給scrollTop賦值去設(shè)置滾動(dòng)條高度
// 在控制臺(tái)輸出
document.documentElement.scrollTop = 0
// 會(huì)發(fā)現(xiàn)已經(jīng)滾動(dòng)的滾動(dòng)條，滾動(dòng)到頁面最頂端。

在js的世界里，瀏覽器的兼容性總是讓人那么頭疼

Safari中使用的是 window.pageYOffset
IE中是 document.body.scrollTop 以及 document.documentElement.scrollTop；

所以考慮到瀏覽器兼容性問題，最后總結(jié)出一句完美兼容的代碼。

// 獲取滾動(dòng)條高度兼容性寫法
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

3.triple kill

Element?.scroll?Into?View()
這個(gè)方法在MDN上的解釋是實(shí)驗(yàn)中的功能，但是親測(cè)主流瀏覽器是可用，并且出奇的好用。話不多說，直接上代碼。

// 將某個(gè)元素跳轉(zhuǎn)到瀏覽器視口的最上方
element.scrollIntoView()

語法:

// 等同于element.scrollIntoView(true) 
element.scrollIntoView();

// Boolean型參數(shù)
// true  元素的頂端將和其所在滾動(dòng)區(qū)的可視區(qū)域的頂端對(duì)齊 ； false 元素的底端將和其所在滾動(dòng)區(qū)的可視區(qū)域的底端對(duì)齊 
element.scrollIntoView(alignToTop); 

// 一個(gè)帶有選項(xiàng)的object：
// {
//     behavior: "auto"(默認(rèn))  | "instant" | "smooth"(緩動(dòng)),
//     block:    "start" | "end",
// }
element.scrollIntoView(scrollIntoViewOptions); // Object型參數(shù)

4.quadra kill

目前來講基本的錨點(diǎn)功能已經(jīng)實(shí)現(xiàn)了，點(diǎn)擊menu就會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的content

但是看起來還是有些生硬。咻~ 的一下就過去了，所以加個(gè)緩動(dòng)來提升下用戶體驗(yàn)吧。

在你需要滾動(dòng)的div的樣式里面加一句。

scroll-behavior: smooth; // 滾動(dòng)條緩慢滾動(dòng)

5.penta kill

到此為止，一個(gè)完整的錨點(diǎn)緩慢滾動(dòng)就完成了，快去試試吧！！！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/109365.html

相關(guān)文章

  • 記 · 滾動(dòng)條滾動(dòng)到指定位置(錨點(diǎn))的不同實(shí)現(xiàn)方式

    摘要：那什么是錨點(diǎn)問題呢錨點(diǎn)是網(wǎng)頁制作中超級(jí)鏈接的一種，又叫命名錨記。命名錨記像一個(gè)迅速定位器一樣是一種頁面內(nèi)的超級(jí)鏈接，運(yùn)用相當(dāng)普遍。這是標(biāo)簽提供給我們的錨點(diǎn)解決方式。滾動(dòng)條緩慢滾動(dòng)到此為止，一個(gè)完整的錨點(diǎn)緩慢滾動(dòng)就完成了，快去試試吧 showImg(https://segmentfault.com/img/bVbslYF);最近項(xiàng)目中遇到傳統(tǒng)的錨點(diǎn)問題。那什么是錨點(diǎn)問題呢？ 錨點(diǎn) 是網(wǎng)頁...

    imingyu 評(píng)論0 收藏0

  • 可視化效果(Visual effects)

    摘要：一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的邊內(nèi)。這種盒并不一定會(huì)根據(jù)其祖先的屬性裁剪。默認(rèn)情況下，元素不會(huì)被裁剪。在閉合路徑內(nèi)的內(nèi)容會(huì)顯示，而路徑外邊的都會(huì)被剪掉著作權(quán)歸作者所有。 Overflow and clipping 一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的content邊內(nèi)。某些情況下，一個(gè)盒可能會(huì)溢出，意味著它的部分內(nèi)容或者全部?jī)?nèi)容位于該盒外部，例如： 一行無法拆分，導(dǎo)致行盒比...

    JowayYoung 評(píng)論0 收藏0

  • 淺說虛擬列表的實(shí)現(xiàn)原理

    摘要：虛擬列表的實(shí)現(xiàn)有多種方案，本文以組件為基礎(chǔ)進(jìn)行分析。常見的無限滾動(dòng)便是延遲渲染的一種實(shí)現(xiàn)，而虛擬列表則是按需渲染的一種實(shí)現(xiàn)。接下來，本文會(huì)簡(jiǎn)單介紹虛擬列表的一種實(shí)現(xiàn)方案。實(shí)現(xiàn)本章節(jié)將會(huì)創(chuàng)建一個(gè)組件，并結(jié)合代碼，慢慢梳理虛擬列表的實(shí)現(xiàn)。 在 列表數(shù)據(jù)的展示優(yōu)化 一文中，提到了對(duì)于列表形態(tài)的數(shù)據(jù)展示的按需渲染。這種方式是指根據(jù)容器元素的高度以及列表項(xiàng)元素的高度來顯示長(zhǎng)列表數(shù)據(jù)中的某一個(gè)部分...

    趙春朋 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)總結(jié)——HTML

    摘要：跨列從指定單元格的位置處開始，橫向向右合并幾個(gè)單元格包含自己，被合并的單元格要?jiǎng)h除。 前端知識(shí)點(diǎn)總結(jié)——HTML HTML：HTML4.01 指的就是網(wǎng)頁技術(shù)HTML5：HTML4.01的升級(jí)版本 1.web的基礎(chǔ)知識(shí) web與Internet 1.Internet:全球性的計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)，因特網(wǎng)，互聯(lián)網(wǎng)，交互網(wǎng) 2.提供服務(wù) 訪問網(wǎng)站：www（world wide web）服務(wù) ...

    sourcenode 評(píng)論0 收藏0

  • 返回頂部的幾種實(shí)現(xiàn)

    摘要：返回頂部這里初始狀態(tài)的返回頂部為不可見，通過判斷頁面滾動(dòng)高度切換顯示隱藏，的樣式可以自己設(shè)計(jì)。 showImg(https://segmentfault.com/img/bVGDef?w=1390&h=540); 返回頂部的按鈕大家并不陌生，針對(duì)長(zhǎng)滾動(dòng)條的信息流頁面添加返回頂部的按鈕可以給用戶良好的體驗(yàn)，而返回頂部的實(shí)現(xiàn)也是多種多樣，本文分享幾個(gè)案例并給出評(píng)價(jià) 作為引子講一個(gè)常用的案例...

    SillyMonkey 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<