$(document).scrollTop(); 用原生JS怎么写
时间: 2024-05-01 12:19:02 浏览: 8
可以使用以下代码来获取当前页面滚动的距离:
```
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
```
该代码首先检查 `window.pageYOffset` 是否可用,如果不可用则使用 `document.documentElement.scrollTop` 或 `document.body.parentNode.scrollTop` 或 `document.body.scrollTop` 获取页面滚动距离,最后将获取到的值赋给 `scrollTop` 变量。
相关问题
1、获取视窗的宽高、文档的宽高、文档滚动距离的大小,分别写原生JS和JQ中的获取方法。
原生JS获取方法:
获取视窗宽高:
```javascript
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
```
获取文档宽高:
```javascript
var documentWidth = Math.max(document.documentElement.clientWidth, document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth);
var documentHeight = Math.max(document.documentElement.clientHeight, document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight);
```
获取文档滚动距离:
```javascript
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
```
JQ获取方法:
获取视窗宽高:
```javascript
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
```
获取文档宽高:
```javascript
var documentWidth = $(document).width();
var documentHeight = $(document).height();
```
获取文档滚动距离:
```javascript
var scrollLeft = $(document).scrollLeft();
var scrollTop = $(document).scrollTop();
```
原生js实现列表内容自动向上滚动效果
要实现列表内容自动向上滚动的效果,可以使用原生的JavaScript来操作DOM元素和定时器。
首先,可以通过getElementById或querySelector等方法获取到包含列表内容的元素。
然后,通过获取元素的高度、内容等信息来判断是否需要滚动。
接着,可以利用定时器setInterval来不断改变元素的scrollTop属性值,实现滚动效果。
具体步骤如下:
1. 首先,获取到包含列表内容的元素:
```javascript
var listContainer = document.getElementById("listContainer");
//或者使用querySelector根据CSS选择器选择元素: var listContainer = document.querySelector("#listContainer");
```
2. 判断是否需要滚动,比如当元素内容的高度大于元素本身的高度时才需要滚动:
```javascript
if(listContainer.scrollHeight > listContainer.clientHeight){
// 需要滚动,执行后续操作
}
```
3. 设置定时器,不断改变元素的scrollTop属性值,实现滚动效果:
```javascript
var isScrolling = true; // 表示是否正在滚动
setInterval(function(){
if(isScrolling){
listContainer.scrollTop += 1; // 每次滚动1个像素,可根据需要调整滚动速度
if(listContainer.scrollTop === (listContainer.scrollHeight - listContainer.clientHeight)){
listContainer.scrollTop = 0; // 滚动到底部后,回到顶部
}
}
}, 50); // 每50毫秒滚动一次,可根据需要调整滚动速度
```
4. 可以添加一些事件来控制滚动的开始和停止,比如鼠标进入和离开时暂停和恢复滚动效果:
```javascript
listContainer.onmouseover = function(){
isScrolling = false; // 鼠标进入时停止滚动
}
listContainer.onmouseout = function(){
isScrolling = true; // 鼠标离开时恢复滚动
}
```
以上就是用原生JavaScript实现列表内容自动向上滚动效果的基本步骤。根据具体需求,还可以进行一些定制和调整,比如添加缓动效果、点击按钮控制滚动等。