頁面列表實現向上無縫滾動

2021-10-04 04:18:23 字數 1168 閱讀 8454

>

class

="hello"

id="container"

>

"content1"

>

>

v-for

="(item,index) in list"

:key

="index"

>

}li>

ul>

div>

"content2"

>

div>

div>

template

>

export

default,,

,,,,

,,,,

,,]}

},mounted()

else

}// 定時器

var timer =

setinterval

(marquee,intervaltime)

;// 滑鼠移入container 元素上 清除定時器 停止滾動

document.

getelementbyid

("container").

onmouseover

=function()

// 滑鼠移出container 元素上 繼續滾動

document.

getelementbyid

("container").

onmouseout

=function()

}}<

/script>包裹的最外層容器要給乙個固定的高度, 同時要 overflow:hidden;

element.scrolltop 屬性可以獲取或設定乙個元素的內容垂直滾動的畫素數。

乙個元素的 scrolltop 值是這個元素的內容頂部(卷起來的)到它的視口可見內容(的頂部)的距離的度量。當乙個元素的內容沒有產生垂直方向的滾動條,那麼它的 scrolltop 值為0。

element.scrollheight 這個唯讀屬性是乙個元素內容高度的度量,包括由於溢位導致的檢視中不可見內容。

js 無縫向上滾動

這種節奏經常用在相同布局內容多的地方,列如排行榜,新聞等地方。為了效率,在此做個筆記 王芳王芳王芳王芳王芳王芳 label 156 9707 label 護膚禮包 label span span label 留校留校留校留校 label 156 9707 label 護膚禮包護膚禮包護膚禮包護膚禮包...

Js實現內容向上無縫迴圈滾動

當前專案有乙個類似公告向上滾動的需求,在網上搜尋到乙個比較棒的程式,現摘錄如下 document.getelementbyid 的最簡化應用 function element return elements if typeof element string else 類建立函式 var class ...

javascript 文字無縫向上滾動

靜態 style height 30px overflow hidden id marquee 第1段p 第2段p 第3段p 第4段p 第5段p div div 解釋 首先最外層是乙個高度只有30px的層,這樣大概只能顯示一行文字。然後裡面有乙個 marquee的層,這個層包含了很多段文字,高度實際...