怎样用js实现滚动条来回滚动,帮我看看怎么改

JavaScript07

怎样用js实现滚动条来回滚动,帮我看看怎么改,第1张

var camera

var isDown

window.onload = function () {

    //滚动条索取对象(这里使用整个页面,确保页面有滚动条)

    camera = document.body

    isDown = true //默认向下

    c = setInterval(gundong, 10)

}

var gundong = function () {

    if (isDown) {

        camera.scrollTop++ //下降

        //如果滚动条超过100的话,就往上

        //可以修改这个条件,作为折返的前提

        if (camera.scrollTop > 100) {

            isDown = false

        }

    } else {

        camera.scrollTop-- //上升

        //到达顶部的话,就下降

        if (camera.scrollTop == 0) {

            isDown = true

        }

    }

}

1、首先需要新建一个HTML文档,这里设立一下基本的架构。

2、再新建一个CSS文件,用link关联一下HTML文档。

3、创建DIV标签,并且往里面填充内容。

4、先设定一下滚动条内框的大小。

5、用border先来查看是否有超出,这里可以看出超出了很多内容。

6、overflow-y: scrolloverflow-x: scroll加上这个样式滚动条就会出现了。

7、现在就能对轨道和滚动条进行样式的设置了。