一,新建一个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