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

資訊專欄INFORMATION COLUMN

js scroll相關(guān)內(nèi)容

stackvoid / 1951人閱讀

摘要：滾動(dòng)條當(dāng)前位置距離滾動(dòng)條頂部的高度，也就是相對于父元素頂部，子元素被隱藏內(nèi)容的高度只是元素的一個(gè)屬性不包括和。除了屬性外，元素還有等與滾動(dòng)條相關(guān)的屬性，這些屬性表達(dá)的含義不同，但是用法都是相同，值得注意的是，這些屬性都是只讀的。

前言

看下面這段代碼：

父元素的高度小于子元素的高度，子元素的內(nèi)容根據(jù)父元素的視區(qū)會(huì)有內(nèi)容裁剪，這時(shí)我們設(shè)置父元素的overflow屬性值為auto，我們可以看到此時(shí)顯示了滾動(dòng)條。

那么問題來了，究竟是以哪個(gè)元素為視窗，滾動(dòng)條是屬于哪個(gè)元素呢？通過設(shè)置background-color，可以知道，是以parent高度為視窗，滾動(dòng)條也是屬于parent元素的。

onscroll

看下面這段代碼：

onscroll為元素的滾動(dòng)條滾動(dòng)時(shí)觸發(fā)的事件，同時(shí)通過這段代碼也驗(yàn)證了，滾動(dòng)條是屬于parent元素的。

scrollTop 
scrollTop:滾動(dòng)條當(dāng)前位置距離滾動(dòng)條頂部的高度，也就是相對于父元素頂部，子元素被隱藏內(nèi)容的高度；
          只是DOM元素的一個(gè)屬性（不包括window和document）。

看下面這段代碼：

首先在控制臺(tái)會(huì)輸出一個(gè)0. //這是body元素的scrollTop值；
然后滾動(dòng)滾動(dòng)條的時(shí)候，會(huì)打印觸發(fā)每次滾動(dòng)事件時(shí)scrollTop的值。

現(xiàn)在我們知道了如何獲取scrollTop的值，那么如何改變呢？

我們可以看到當(dāng)刷新頁面時(shí)，滾動(dòng)條直接顯示在中間位置，所以我們通過直接給scrollTop賦值就可以改變滾動(dòng)條的位置。

除了scrollTop屬性外，DOM元素還有scrollHeight,scrollWidth,scrollLeft等與滾動(dòng)條相關(guān)的屬性，這些屬性表達(dá)的含義不同，但是用法都是相同，值得注意的是，這些屬性都是只讀的。

既然DOM元素可以通過scrollTop屬性獲取或是設(shè)置滾動(dòng)條的位置，那么document和window如何操作呢？

scroll scrollBy scrollTo

這三個(gè)屬性，都是window對象的方法,也是全局的方法。
window.scroll(x:XXX,y:XXX):把窗口滾動(dòng)到指定的位置；
window.scrollTo(x,y):與window.scroll相同
window.scrollBy(x,y):把窗口相對x,y滾動(dòng)

window.scrollBy(10,-20)//把窗口向右移動(dòng)10px,向上移動(dòng)20px。

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

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

相關(guān)文章

  • vue.js 移動(dòng)端音樂app（一） 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實(shí)現(xiàn) （1）功能 對 better-scroll 插件的基本封裝，實(shí)現(xiàn)移動(dòng)端的滾動(dòng) （2）實(shí)現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項(xiàng)之一 （1）取值： 1 滾動(dòng)的時(shí)候會(huì)派發(fā) scroll 事件，會(huì)截流。 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā) scroll 事件，不會(huì)截流。 3 除了實(shí)時(shí)派發(fā) scroll 事件，在 swipe 的情況...

    wqj97 評論0 收藏0

  • vue.js 移動(dòng)端音樂app（一） 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實(shí)現(xiàn) （1）功能 對 better-scroll 插件的基本封裝，實(shí)現(xiàn)移動(dòng)端的滾動(dòng) （2）實(shí)現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項(xiàng)之一 （1）取值： 1 滾動(dòng)的時(shí)候會(huì)派發(fā) scroll 事件，會(huì)截流。 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā) scroll 事件，不會(huì)截流。 3 除了實(shí)時(shí)派發(fā) scroll 事件，在 swipe 的情況...

    FingerLiu 評論0 收藏0

  • vue.js 移動(dòng)端音樂app（一） 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實(shí)現(xiàn) （1）功能 對 better-scroll 插件的基本封裝，實(shí)現(xiàn)移動(dòng)端的滾動(dòng) （2）實(shí)現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項(xiàng)之一 （1）取值： 1 滾動(dòng)的時(shí)候會(huì)派發(fā) scroll 事件，會(huì)截流。 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā) scroll 事件，不會(huì)截流。 3 除了實(shí)時(shí)派發(fā) scroll 事件，在 swipe 的情況...

    MadPecker 評論0 收藏0

  • JavaScript中的各種寬高屬性

    摘要：在中，存在著多的關(guān)于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問題對象的屬性引用的是對象，表示該窗口中當(dāng)前顯示文檔的。如果出現(xiàn)滾動(dòng)條，滾動(dòng)條會(huì)遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動(dòng)條的寬高。 在js中，存在著N多的關(guān)于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

    wangbinke 評論0 收藏0

  • 微信小程序——商城篇

    摘要：微信小程序之跳轉(zhuǎn)在進(jìn)入商品詳情頁以后，點(diǎn)擊左下角的圖標(biāo)原應(yīng)該跳轉(zhuǎn)到首頁，但是一直點(diǎn)也不跳，而且也不報(bào)錯(cuò)。放下效果圖微信小程序購物車購物車頁面邏輯的話，要按業(yè)務(wù)需求來。 前言 隨著wepy和mpvue的出現(xiàn)及流行，開發(fā)小程序變的越來越便捷和強(qiáng)大，作為基佬社區(qū)的一份子，我們都需要把自己遇到的問題以及如何解決的方式相互分享，這樣才能幫助到更多的朋（ji）友（lao）。如有寫的不足的地方，請各...

    k00baa 評論0 收藏0

發(fā)表評論

0條評論

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