js页面循环滚动 ie浏览器
时间: 2023-08-07 14:07:47 浏览: 46
你可以使用以下代码实现循环滚动:
```javascript
var scrollStep = 1; // 每次滚动的像素数
var delay = 30; // 每次滚动的间隔时间,单位为毫秒
var timer = null;
var scrollDiv = document.getElementById('scrollDiv');
var scrollContent = document.getElementById('scrollContent');
scrollDiv.scrollTop = 0;
function startScroll() {
timer = setInterval(scrolling, delay);
scrollDiv.scrollTop += scrollStep;
}
function scrolling() {
if (scrollDiv.scrollTop % scrollContent.offsetHeight == 0) {
clearInterval(timer);
setTimeout(startScroll, delay);
} else {
scrollDiv.scrollTop += scrollStep;
if (scrollDiv.scrollTop >= scrollContent.scrollHeight - scrollDiv.offsetHeight) {
scrollDiv.scrollTop = 0;
}
}
}
setTimeout(startScroll, delay);
```
其中,`scrollDiv` 是包含滚动内容的 `div` 元素,`scrollContent` 是滚动内容的 `div` 元素。
需要注意的是,IE 浏览器下,`scrollHeight` 和 `offsetHeight` 属性的计算方式与其他浏览器有所不同,需要特别处理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)