js怎么控制滚动条使div在一定区间显示

JavaScript014

js怎么控制滚动条使div在一定区间显示,第1张

js控制滚动条使div在一定区间显示方法步骤。

一,新建一个html文件,命名为test.html,用于讲解如何使用JS控制DIV内容的滚动条。

二,在test.html文件内,创建两个div模块,一个div模板包含另一个div模块。

三,在test.html文件内,分别设置两个div模块的id属性为test,ntest。

四,在css中,分别通过id来设置两个div的样式,定义它们的高度、宽度,外部div将overflow属性设置为auto,即超过宽度隐藏,并出现滚动条。注意,内部div的高度、宽度必须比外部div的宽高大,才会出现滚词条。

五,在js中,通过id获得外部div对象,使用scrollTop属性控制垂直滚动条位置为100px,使用scrollLeft属性控制水平滚动条位置为150px。

六,在浏览器打开test.html文件,查看实现的效果。实现在一定区间内显示。

请确认,谢谢。

通过div的scrollTop变动控制垂直

滚动条

位置。

通过div的scrollLeft变动控制水平滚动条位置。

示例

//d1是外层div,带滚动条

2222

<script>

document.

getElementById

('d1').scrollTop=100//通过scrollTop设置滚动到100位置

document.getElementById('d1').scrollLeft=200//通过scrollTop设置滚动到200位置

</script>

使用js获取的相关方法

//回到页面顶部

    $("#goTotop").click(function(){

        $('body,html').animate({scrollTop:0},1500) //点击按钮让其回到页面顶部

    })

     

    $(window).scroll(function() {

        var yheight1=window.pageYOffset //滚动条距顶端的距离

        var yheight=getScrollTop() //滚动条距顶端的距离

        var height =document.documentElement.clientHeight//浏览器可视化窗口的大小

        var top=parseInt(yheight)+parseInt(height)-217

        var divobj=$(".kf")

        divobj.attr('style','top:'+top+'px')

    })

     

/**

 * 获取滚动条距离顶端的距离

 * @return {}支持IE6

 */

function getScrollTop() {

        var scrollPos

        if (window.pageYOffset) {

        scrollPos = window.pageYOffset }

        else if (document.compatMode && document.compatMode != 'BackCompat')

        { scrollPos = document.documentElement.scrollTop }

        else if (document.body) { scrollPos = document.body.scrollTop } 

        return scrollPos 

}