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

資訊專欄INFORMATION COLUMN

通訊錄式的吸頂效果

AndroidTraveler / 1900人閱讀

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

通訊錄式的吸頂效果，當前bar固定在頂部

方法一： js 監聽 onscroll 事件

實現原理

吸頂的那個 bar 其實是一個定位在屏幕最上的一個元素，把下面 各個區塊的高度累加放到一個數組里 [0, 740, 990, 1310, ...]

拿當前滾動體滾過的距離去上面的數組里找對應的區間，然后將 bar 的文字填充進去

拿所在區間的 上限值 - 滾動值 = 偏移量

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

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

具體代碼如下




    
    
    
    吸頂效果
獲取滾動體滾過的距離 參考鏈接

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

問題如下

在混雜模式下，由于所有瀏覽器均使用 document.body.scrollTop 獲取頁面的垂直滾動條的位置，所以不會出現兼容性問題。
而在標準模式下，由于 Chrome 與 Safari 仍然使用 document.body.scrollTop，而對于 document.documentElement.scrollTop 返回為 0。

順便再說說 document.scrollingElement 這個屬性。可能是瀏覽器廠商們也覺得現在的頁面滾動元素太亂，一會兒 BODY 一會兒 HTML，跟頁面模式有關，還跟 Webkit 的遺留 BUG 有關，于是搞出來這么個東西。根據 MDN 的介紹：

Document 的 scrollingElement 是一個只讀屬性，始終指向頁面滾動元素

各個區塊的高度計算 參考文章 
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 的區別

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

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

scrollHeight
scrollHeight: 因為子元素比父元素高，父元素不想被子元素撐的一樣高就顯示出了滾動條，
在滾動的過程中本元素有部分被隱藏了，scrollHeight代表包括當前不可見部分的元素的高度。

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

在有滾動條時討論scrollHeight才有意義，在沒有滾動條時scrollHeight==clientHeight恒成立。單位px，只讀元素

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

offsetTop: 當前元素頂部距離最近父元素頂部的距離,和有沒有滾動條沒有關系。單位px，只讀元素。

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

上栗的吸頂效果可以用 sitcky 實現

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

注意事項：

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

父級元素不能設置固定的 hight 高度值

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

sticky 定位，不僅可以設置 top，基于 滾動容器上邊緣定位；還可以設置bottom，left，right

sticky 參考張鑫旭大佬的文章 sticky

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

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

相關文章

  • 通訊錄式的吸頂效果

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

    Forelax 評論0 收藏0

  • 純css實現手機通訊錄

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

    王晗 評論0 收藏0

  • 純css實現手機通訊錄

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

    蘇丹 評論0 收藏0

  • 純css實現手機通訊錄

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

    leonardofed 評論0 收藏0

發表評論

0條評論

AndroidTraveler

男|高級講師

TA的文章

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