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

JavaScript034

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文件，查看实现的效果。实现在一定区间内显示。

请确认，谢谢。

1.滚动条：

JS：onScroll

JQ：scroll(function)

滚动条，快速回到顶部代码：

 $(function() {

      var scrollDiv = document.createElement('div')

      $(scrollDiv).attr('id', 'toTop').html('返回顶部').appendTo('body')

      $(window).scroll(function() {

             if ($(this).scrollTop() != 0) {

                 $('#toTop').fadeIn()

             } else {

                 $('#toTop').fadeOut()

             }

      })

     $('#toTop').click(function() {

           $('body,html').animate({ scrollTop: 0 }, 800)

     })

 })

为了看见，给div加上一个css样式（背景，边框）就可以了。background: #121212

2.滚轮：

JS：onMouseWheel

JQ：找插件，网上可以搜到。

滚轮代码根据需要自己写，没什么好的例子，注意JS原声的滚轮滚动一圈在不同浏览器的兼容性写法就好。

楼主可以看看下面的：

http://www.w3cschool.cc/jsref/event-onscroll.html

http://www.w3school.com.cn/jquery/event_scroll.asp

http://liuna718-163-com.iteye.com/blog/1796887