成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

通訊錄式的吸頂效果

AndroidTraveler / 1907人閱讀

摘要：在有滾動(dòng)條時(shí)討論才有意義，在沒有滾動(dòng)條時(shí)恒成立。單位，只讀元素代表在有滾動(dòng)條時(shí)，滾動(dòng)條向下滾動(dòng)的距離也就是元素頂部被遮住部分的高度。當(dāng)前元素頂部距離最近父元素頂部的距離和有沒有滾動(dòng)條沒有關(guān)系。

通訊錄式的吸頂效果，當(dāng)前bar固定在頂部

方法一： js 監(jiān)聽 onscroll 事件

實(shí)現(xiàn)原理

吸頂?shù)哪莻€(gè) bar 其實(shí)是一個(gè)定位在屏幕最上的一個(gè)元素，把下面 各個(gè)區(qū)塊的高度累加放到一個(gè)數(shù)組里 [0, 740, 990, 1310, ...]

拿當(dāng)前滾動(dòng)體滾過的距離去上面的數(shù)組里找對(duì)應(yīng)的區(qū)間，然后將 bar 的文字填充進(jìn)去

拿所在區(qū)間的 上限值 - 滾動(dòng)值 = 偏移量

var fixedTop = (diff > 0 && diff < 40) ? diff - 40 : 0

根據(jù)上面 fixedTop 設(shè)置偏移量 fixedDom.style.transform = translate3d(0, ${fixedTop}px, 0)

具體代碼如下




    
    
    
    吸頂效果
獲取滾動(dòng)體滾過的距離 參考鏈接

const el = document.scrollingElement || document.documentElement
const top = el.scrollTop

問題如下

在混雜模式下，由于所有瀏覽器均使用 document.body.scrollTop 獲取頁面的垂直滾動(dòng)條的位置，所以不會(huì)出現(xiàn)兼容性問題。
而在標(biāo)準(zhǔn)模式下，由于 Chrome 與 Safari 仍然使用 document.body.scrollTop，而對(duì)于 document.documentElement.scrollTop 返回為 0。

順便再說說 document.scrollingElement 這個(gè)屬性?？赡苁菫g覽器廠商們也覺得現(xiàn)在的頁面滾動(dòng)元素太亂，一會(huì)兒 BODY 一會(huì)兒 HTML，跟頁面模式有關(guān)，還跟 Webkit 的遺留 BUG 有關(guān)，于是搞出來這么個(gè)東西。根據(jù) MDN 的介紹：

Document 的 scrollingElement 是一個(gè)只讀屬性，始終指向頁面滾動(dòng)元素

各個(gè)區(qū)塊的高度計(jì)算 參考文章 
var listGroup = $cls(".list-group-item")
let height = 0
this.listHeight.push(height)
listGroup.forEach(item => {
    height += item.clientHeight
    this.listHeight.push(height)
})

clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop 的區(qū)別

clientHeight和offsetHeight屬性和元素的滾動(dòng)、位置沒有關(guān)系它代表元素的高度，其中：
clientHeight：包括padding但不包括border、水平滾動(dòng)條、margin的元素的高度。對(duì)于inline的元素這個(gè)屬性一直是0，單位px，只讀元素。

offsetHeight：包括padding、border、水平滾動(dòng)條，但不包括margin的元素的高度。對(duì)于inline的元素這個(gè)屬性一直是0，單位px，只讀元素。

scrollHeight
scrollHeight: 因?yàn)樽釉乇雀冈馗?，父元素不想被子元素?fù)蔚囊粯痈呔惋@示出了滾動(dòng)條，
在滾動(dòng)的過程中本元素有部分被隱藏了，scrollHeight代表包括當(dāng)前不可見部分的元素的高度。

而可見部分的高度其實(shí)就是clientHeight，也就是scrollHeight>=clientHeight恒成立。

在有滾動(dòng)條時(shí)討論scrollHeight才有意義，在沒有滾動(dòng)條時(shí)scrollHeight==clientHeight恒成立。單位px，只讀元素

scrollTop: 代表在有滾動(dòng)條時(shí)，滾動(dòng)條向下滾動(dòng)的距離也就是元素頂部被遮住部分的高度。在沒有滾動(dòng)條時(shí)scrollTop==0恒成立。單位px，可讀可設(shè)置。

offsetTop: 當(dāng)前元素頂部距離最近父元素頂部的距離,和有沒有滾動(dòng)條沒有關(guān)系。單位px，只讀元素。

2019-07-09 更新
方法二：position: sticky 
sticky: 粘性布局，基本上，可以看作是 position: relative 和 position: fixed 的結(jié)合體 ——當(dāng)元素在屏幕內(nèi)，表現(xiàn)為 relative ，就要滾出顯示器屏幕的時(shí)候，表現(xiàn)為 fixed
對(duì)元素設(shè)置：
position: -webkit-sticky;
position: sticky;
top: 0; // 左右也可以設(shè)置 left

上栗的吸頂效果可以用 sitcky 實(shí)現(xiàn)

// 將上述代碼改成 如下即可，注意其祖先元素不可有 overflow: visible 以外的元素
.list-group-title {
    postion: sticky;
    top: 0;
}

注意事項(xiàng)：

父級(jí)元素不能有任何 overflow: visible 以外的設(shè)置，否則就沒有粘滯效果

父級(jí)元素不能設(shè)置固定的 hight 高度值

同一個(gè)父容器中的 sticky 元素，如果定位值相同，則會(huì)重疊；如果屬于不同父元素，則會(huì)鳩占鵲巢，擠開原來的元素，依次形成占位效果。（吸頂效果）

sticky 定位，不僅可以設(shè)置 top，基于 滾動(dòng)容器上邊緣定位；還可以設(shè)置bottom，left，right

sticky 參考張?chǎng)涡翊罄械奈恼?sticky

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

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

相關(guān)文章

  • 通訊錄式的吸頂效果

    摘要：在有滾動(dòng)條時(shí)討論才有意義，在沒有滾動(dòng)條時(shí)恒成立。單位，只讀元素代表在有滾動(dòng)條時(shí)，滾動(dòng)條向下滾動(dòng)的距離也就是元素頂部被遮住部分的高度。當(dāng)前元素頂部距離最近父元素頂部的距離和有沒有滾動(dòng)條沒有關(guān)系。 通訊錄式的吸頂效果，當(dāng)前bar固定在頂部 showImg(https://segmentfault.com/img/bVbnGoq?w=392&h=696); 方法一： js 監(jiān)聽 onscro...

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

  • 純css實(shí)現(xiàn)手機(jī)通訊錄

    摘要：不過要是一個(gè)簡(jiǎn)單的小項(xiàng)目，沒那么多要求的話，純還是能很好的適用的，性能上絕對(duì)要比通過滾動(dòng)監(jiān)聽強(qiáng)上好多倍，而且引用方便，只要數(shù)據(jù)生成了就可以直接使用 我們經(jīng)常在手機(jī)上看到通訊錄列表，這類布局一般有兩個(gè)顯著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸頂 快速定位 下...

    王晗 評(píng)論0 收藏0

  • 純css實(shí)現(xiàn)手機(jī)通訊錄

    摘要：不過要是一個(gè)簡(jiǎn)單的小項(xiàng)目，沒那么多要求的話，純還是能很好的適用的，性能上絕對(duì)要比通過滾動(dòng)監(jiān)聽強(qiáng)上好多倍，而且引用方便，只要數(shù)據(jù)生成了就可以直接使用 我們經(jīng)常在手機(jī)上看到通訊錄列表，這類布局一般有兩個(gè)顯著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸頂 快速定位 下...

    蘇丹 評(píng)論0 收藏0

  • 純css實(shí)現(xiàn)手機(jī)通訊錄

    摘要：不過要是一個(gè)簡(jiǎn)單的小項(xiàng)目，沒那么多要求的話，純還是能很好的適用的，性能上絕對(duì)要比通過滾動(dòng)監(jiān)聽強(qiáng)上好多倍，而且引用方便，只要數(shù)據(jù)生成了就可以直接使用 我們經(jīng)常在手機(jī)上看到通訊錄列表，這類布局一般有兩個(gè)顯著的效果 showImg(https://segmentfault.com/img/remote/1460000016709371?w=360&h=640); 首字母吸頂 快速定位 下...

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

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

0條評(píng)論

AndroidTraveler

男|高級(jí)講師

TA的文章

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