亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

瀏覽器滾動(dòng)的詳細(xì)解釋 & Vue 固定滾動(dòng)位置的實(shí)現(xiàn)

Keven / 1878人閱讀

摘要：滾動(dòng)形成的條件父子兩個(gè)元素子元素的高父元素的高并且父元素那么現(xiàn)在考慮這種情況假設(shè)有父子兩個(gè)元素子元素的高度父元素的高度父元素沒有設(shè)置屬性子元素的高度瀏覽器高度在這種情景下子元素會(huì)把撐開也就是子元素的高度就是的高度此時(shí)你滾動(dòng)頁面的時(shí)候是在滾動(dòng)

滾動(dòng)形成的條件

父子兩個(gè)元素

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

ok, 那么現(xiàn)在考慮這種情況:
假設(shè):

有父子兩個(gè)元素, 子元素的高度 > 父元素的高度;

父元素沒有設(shè)置 overflow 屬性.

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

在這種情景下, 子元素會(huì)把 body 撐開, 也就是 子元素的高度, 就是body 的高度.
此時(shí), 你滾動(dòng)頁面的時(shí)候, 是在滾動(dòng)誰?
body 還是 子元素?
是: body

ok, 那么如果父元素設(shè)置了 overflow: scroll 呢?
此時(shí)你滾動(dòng)的, 就是子元素.

這里先定義兩個(gè)名詞:
滾動(dòng)元素: 就是滾來滾去的那個(gè)元素
滾動(dòng)容器: 就是滾動(dòng)元素的父元素

ok, 根據(jù)滾動(dòng)元素的不同, 我們可以把滾動(dòng)分成兩種類型:

文檔級(jí)別的滾動(dòng)

元素級(jí)別的滾動(dòng)

文檔級(jí)別的滾動(dòng), 滾動(dòng)元素固定為 document.body, 滾動(dòng)容器, 就是文檔的根元素
而元素級(jí)別的滾動(dòng), 滾動(dòng)元素就是一個(gè)普通的元素.

說這個(gè)干嘛?
因?yàn)楹蜐L動(dòng)事件是有關(guān)系的

滾動(dòng)事件

元素滾動(dòng)會(huì)觸發(fā)滾動(dòng)事件, 這里要謹(jǐn)記一點(diǎn): 滾動(dòng)事件始終在滾動(dòng)容器上面監(jiān)聽.
對(duì)于文檔級(jí)別的滾動(dòng), 滾動(dòng)事件會(huì)始終在 document 和 window 上面觸發(fā).
這也就意味著, 如果你平時(shí)寫的是:

window.onscroll = xxx, 那么說明你滾動(dòng)的元素是 body.

但是元素級(jí)別的滾動(dòng)就不會(huì)在 document & window 上面觸發(fā)滾動(dòng)事件.

和滾動(dòng)相關(guān)的一些屬性

和滾動(dòng)相關(guān)的屬性, 都是滾動(dòng)容器的.

1 scrollTop/Left 值
記錄當(dāng)前已經(jīng)滾動(dòng)的距離

2 scrollHeight
當(dāng)前的被滾動(dòng)元素的高度, 也就是子元素的高度

3 最大滾動(dòng)高度 = scrollHeight - 當(dāng)前的滾動(dòng)容器的高度

兩個(gè)備注:

文檔級(jí)別的滾動(dòng)的時(shí)候, 你可以試試打印一下 document.body.scrollTop 的值, 發(fā)現(xiàn)是存在的
但是按照: "所有的滾動(dòng)相關(guān)的屬性都屬于滾動(dòng)容器", document.body 是滾動(dòng)元素, 它不應(yīng)該

有這個(gè) document.body.scrollTop 的值的, 這個(gè)是一個(gè)奇怪的點(diǎn).

window 對(duì)象上面的一些和滾動(dòng)相關(guān)的屬性

scrollTo(x,y) 滾動(dòng)到指定的位置
scrollBy(x,y) 將滾動(dòng)條滾動(dòng) 指定的距離,而不是滾動(dòng)到指定的位置.這個(gè)要注意
scrollX/Y 因?yàn)槿绻壎ㄔ?window 對(duì)象上面的 scroll 事件,scrollTop 屬性是用不了的

再說我們的選擇

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

那么如何實(shí)現(xiàn)元素級(jí)別的滾動(dòng)呢?

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

這樣:
假設(shè)頁面長(zhǎng)這樣:

    html
        body
            .container

你可以先給 .container 設(shè)置高度為 100%;

.container {
    height: 100%;
}

當(dāng)然沒效果, 因?yàn)?100%, 相對(duì)于父元素的高度, 父元素沒設(shè)置高度
所以這樣:

body {
    height: 100%;
}

body 的父元素是 html

html {
    height: 100%;
}

日了狗了, html 自己就是根元素, 沒父元素了:
瀏覽器在這里設(shè)置了一個(gè)規(guī)則:

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

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

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

然后考慮滾動(dòng)形成的兩個(gè)條件, 對(duì)于滾動(dòng)容器還要設(shè)置一下: overflow:scroll;
所以最終長(zhǎng)的樣子就這樣:

html, body {
    height: 100%;
}
.container {
    height: 100%;
    overflow:scroll;
}
具體的代碼實(shí)現(xiàn)

wc-directive

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

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

相關(guān)文章

  • vue實(shí)現(xiàn)列表固定列滾動(dòng)

    　　想要在移動(dòng)端中實(shí)現(xiàn)列表固定列固定樣式，可以用vue+scss以下具體內(nèi)容：　　功能介紹：　　在移動(dòng)端開發(fā)中，會(huì)用到列表作為信息展示方式，一般希望上下滾動(dòng)時(shí)，可以固定表頭，左右滾動(dòng)時(shí)，可以固定最左列?！　〈笾滦枨螅骸　?、數(shù)組循環(huán)遍歷可以讓列表所有內(nèi)容循環(huán)展示　　2、在上下滾動(dòng)時(shí)，固定表頭在最頂端顯示；　　3、在左右滾動(dòng)時(shí)，固定左邊一列或多列可以固定顯示；　　4、列表的列寬允許在數(shù)組中設(shè)置；　　...

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

  • 用原生 js && jquery 實(shí)現(xiàn)知乎收起答案功能

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

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

  • 用原生 js && jquery 實(shí)現(xiàn)知乎收起答案功能

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

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

  • MUI框架開發(fā)HTML5手機(jī)APP(二)--頁面跳轉(zhuǎn)傳值&底部選項(xiàng)卡切換

    摘要：三底部選項(xiàng)卡切換頁面底部選項(xiàng)卡的切換，可以說是的標(biāo)志之一。兩種模式的顯示效果差不多，如下圖可見兩種模式的區(qū)別顧名思義，模式是將所有子頁面的內(nèi)容，分別放置到主頁不同的中，當(dāng)我們點(diǎn)擊主頁的不同選項(xiàng)卡時(shí)，切換不同的顯示。 概 述 JRedu 　　在上一篇博客中，我們學(xué)習(xí)了如何使用Hbuilder創(chuàng)建一個(gè)APP，同時(shí)如何使用MUI搭建屬于自己的第一款A(yù)PP，沒有學(xué)習(xí)的同學(xué)可以戳鏈接學(xué)習(xí)： http...

    番茄西紅柿 評(píng)論0 收藏0

  • 前端筆記之CSS（下）浮動(dòng)&BFC&定位&Hack

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

    番茄西紅柿 評(píng)論0 收藏0

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

0條評(píng)論

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