瀏覽器滾動的詳細解釋 & Vue 固定滾動位置的實現

Keven 發布于2019-08-20 18:11 / 1830人閱讀

摘要：滾動形成的條件父子兩個元素子元素的高父元素的高并且父元素那么現在考慮這種情況假設有父子兩個元素子元素的高度父元素的高度父元素沒有設置屬性子元素的高度瀏覽器高度在這種情景下子元素會把撐開也就是子元素的高度就是的高度此時你滾動頁面的時候是在滾動

滾動形成的條件

父子兩個元素

子元素的高 > 父元素的高, 并且父元素 overflow:scroll;

ok, 那么現在考慮這種情況:
假設:

有父子兩個元素, 子元素的高度 > 父元素的高度;

父元素沒有設置 overflow 屬性.

子元素的高度 > 瀏覽器高度

在這種情景下, 子元素會把 body 撐開, 也就是子元素的高度, 就是body 的高度.
此時, 你滾動頁面的時候, 是在滾動誰?
body 還是子元素?
是: body

ok, 那么如果父元素設置了 overflow: scroll 呢?
此時你滾動的, 就是子元素.

這里先定義兩個名詞:
滾動元素: 就是滾來滾去的那個元素
滾動容器: 就是滾動元素的父元素

ok, 根據滾動元素的不同, 我們可以把滾動分成兩種類型:

文檔級別的滾動

元素級別的滾動

文檔級別的滾動, 滾動元素固定為 document.body, 滾動容器, 就是文檔的根元素
而元素級別的滾動, 滾動元素就是一個普通的元素.

說這個干嘛?
因為和滾動事件是有關系的

滾動事件

元素滾動會觸發滾動事件, 這里要謹記一點: 滾動事件始終在滾動容器上面監聽.
對于文檔級別的滾動, 滾動事件會始終在 document 和 window 上面觸發.
這也就意味著, 如果你平時寫的是:

window.onscroll = xxx, 那么說明你滾動的元素是 body.

但是元素級別的滾動就不會在 document & window 上面觸發滾動事件.

和滾動相關的一些屬性

和滾動相關的屬性, 都是滾動容器的.

1 scrollTop/Left 值
記錄當前已經滾動的距離

2 scrollHeight
當前的被滾動元素的高度, 也就是子元素的高度

3 最大滾動高度 = scrollHeight - 當前的滾動容器的高度

兩個備注:

文檔級別的滾動的時候, 你可以試試打印一下 document.body.scrollTop 的值, 發現是存在的
但是按照: "所有的滾動相關的屬性都屬于滾動容器", document.body 是滾動元素, 它不應該

有這個 document.body.scrollTop 的值的, 這個是一個奇怪的點.

window 對象上面的一些和滾動相關的屬性

scrollTo(x,y) 滾動到指定的位置
scrollBy(x,y) 將滾動條滾動指定的距離,而不是滾動到指定的位置.這個要注意
scrollX/Y 因為如果綁定在 window 對象上面的 scroll 事件,scrollTop 屬性是用不了的

再說我們的選擇

我們平時在開發的過程中, 是用文檔級別的滾動還是元素級別的滾動呢?
建議用元素級別的滾動, 因為這意味著我們可以控制更多, 好吧, 我編不出來了.
我個人覺得使用元素級別的滾動比較好, 也就是你自己設置一個元素的高度等于瀏覽器的高度
因為這樣做一些效果, 比如說底部固定一個bar的時候, 就挺方便.

那么如何實現元素級別的滾動呢?

首先你要有一個元素, 元素的高度是瀏覽器的高度 > 那么如何讓元素的高度是瀏覽器的高度?

這樣:
假設頁面長這樣:

    html
        body
            .container

你可以先給 .container 設置高度為 100%;

.container {
    height: 100%;
}

當然沒效果, 因為 100%, 相對于父元素的高度, 父元素沒設置高度
所以這樣:

body {
    height: 100%;
}

body 的父元素是 html

html {
    height: 100%;
}

日了狗了, html 自己就是根元素, 沒父元素了:
瀏覽器在這里設置了一個規則:

html 如果設置了 height: 100%, 那么高度就是瀏覽器的高度.

那么再回溯回來, 我們這樣弄就行了:

html, body {
    height: 100%;
}
.container {
    height: 100%;
}

然后考慮滾動形成的兩個條件, 對于滾動容器還要設置一下: overflow:scroll;
所以最終長的樣子就這樣:

html, body {
    height: 100%;
}
.container {
    height: 100%;
    overflow:scroll;
}

具體的代碼實現

wc-directive

GPU云服務器云服務器滾動位置滾動到原來位置滾動到指定位置滾動條位置復位

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

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

vue實現列表固定列滾動

　　想要在移動端中實現列表固定列固定樣式，可以用vue+scss以下具體內容：　　功能介紹：　　在移動端開發中，會用到列表作為信息展示方式，一般希望上下滾動時，可以固定表頭，左右滾動時，可以固定最左列。　　大致需求：　　1、數組循環遍歷可以讓列表所有內容循環展示　　2、在上下滾動時，固定表頭在最頂端顯示；　　3、在左右滾動時，固定左邊一列或多列可以固定顯示；　　4、列表的列寬允許在數組中設置；　　...

3403771864 2022-09-13 21:38 評論0 收藏0
用原生 js &amp;&amp; jquery 實現知乎收起答案功能

摘要：需求很簡單，而且和知乎的顯示全部收起功能非常相似，但是了一下沒有找到類似的，因此決定自己實現一個看了知乎的網頁代碼。 showImg(https://segmentfault.com/img/remote/1460000008488966);showImg(https://segmentfault.com/img/remote/1460000008488967); Update 20...

brianway 2019-08-20 12:19 評論0 收藏0
用原生 js &amp;&amp; jquery 實現知乎收起答案功能

摘要：需求很簡單，而且和知乎的顯示全部收起功能非常相似，但是了一下沒有找到類似的，因此決定自己實現一個看了知乎的網頁代碼。 showImg(https://segmentfault.com/img/remote/1460000008488966);showImg(https://segmentfault.com/img/remote/1460000008488967); Update 20...

Seay 2019-08-01 15:57 評論0 收藏0
MUI框架開發HTML5手機APP(二)--頁面跳轉傳值&amp;底部選項卡切換

摘要：三底部選項卡切換頁面底部選項卡的切換，可以說是的標志之一。兩種模式的顯示效果差不多，如下圖可見兩種模式的區別顧名思義，模式是將所有子頁面的內容，分別放置到主頁不同的中，當我們點擊主頁的不同選項卡時，切換不同的顯示。概述 JRedu 　　在上一篇博客中，我們學習了如何使用Hbuilder創建一個APP，同時如何使用MUI搭建屬于自己的第一款APP，沒有學習的同學可以戳鏈接學習： http...

番茄西紅柿 2019-04-23 13:37 評論0 收藏0
前端筆記之CSS（下）浮動&amp;BFC&amp;定位&amp;Hack

摘要：并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。宋體清除浮動這是專業術語，其實就是需要我們解決浮動帶來的影響宋體父元素的高度塌陷宋體。相對定位的參考點是自身。一、浮動 1.1 各個語言的主要知識點 HTML：標簽語義化(那么怎么樣布局才是合理的?沒有絕對的對和錯) CSS：　　樣式：　　布局：　　　　標準流(標準文檔流、普通文檔流)：盒子模型(width/height...

番茄西紅柿 2019-04-23 11:44 評論0 收藏0