js scroll相關內容

stackvoid 發布于2019-08-23 14:10 / 1955人閱讀

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

前言

看下面這段代碼：

父元素的高度小于子元素的高度，子元素的內容根據父元素的視區會有內容裁剪，這時我們設置父元素的overflow屬性值為auto，我們可以看到此時顯示了滾動條。

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

onscroll

看下面這段代碼：

onscroll為元素的滾動條滾動時觸發的事件，同時通過這段代碼也驗證了，滾動條是屬于parent元素的。

scrollTop

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

看下面這段代碼：

首先在控制臺會輸出一個0. //這是body元素的scrollTop值；
然后滾動滾動條的時候，會打印觸發每次滾動事件時scrollTop的值。

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

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

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

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

scroll scrollBy scrollTo

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

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

GPU云服務器云服務器 js滾動scroll 相關內容云計算服務器的相關內容 js搜索框相關

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

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

vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

wqj97 2019-08-21 17:38 評論0 收藏0
vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

FingerLiu 2019-08-01 18:01 評論0 收藏0
vue.js 移動端音樂app（一）基礎組件 scroll

一、基礎實現（1）功能對 better-scroll 插件的基本封裝，實現移動端的滾動（2）實現引入 better-scroll props probeType: better-scroll 配置項之一（1）取值： 1 滾動的時候會派發 scroll 事件，會截流。 2 滾動的時候實時派發 scroll 事件，不會截流。 3 除了實時派發 scroll 事件，在 swipe 的情況...

MadPecker 2019-08-29 13:49 評論0 收藏0
JavaScript中的各種寬高屬性

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

wangbinke 2019-08-20 12:21 評論0 收藏0
微信小程序——商城篇

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

k00baa 2019-08-26 12:01 評論0 收藏0