本文摘自PHP中文网,作者零下一度,侵删。
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法。scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部不一定齐平.一、scrollIntoView
html
1 | <div><h2>scrollIntoView</h2><button id= "roll1" >scrollIntoView(false)</button><button id= "roll2" >scrollIntoView(true)</button><div><div id= "myDiv" ></div><div id= "roll_top" >scrollIntoView(ture)元素上边框与视窗顶部齐平<span id= "bottom" >scrollIntoView(false)元素下边框与视窗底部齐平</span></div></div></div>
|
css
1 2 3 4 5 | #myDiv {height: 900px;background-color: gray;
}#roll_top {height: 900px;background-color: green;color: #FFF;font-size: 50px;position: relative;
}#bottom {position: absolute;display: block;left: 0;bottom: 0;
}
|
js
1 2 3 4 5 6 7 8 | window.onload = function () {
document.querySelector( "#roll1" ).onclick = function () {
document.querySelector( "#roll_top" ).scrollIntoView(false);
};
document.querySelector( "#roll2" ).onclick = function () {
document.querySelector( "#roll_top" ).scrollIntoView(true);
};
}
|
二、滚动监听
html
1 | <div><h2>scroll</h2><div id= "nav" ><div class = "f1" >floor1</div><div class = "f2" >floor2</div><div class = "f3" >floor3</div><div class = "f4" >floor4</div><div class = "f5" >floor5</div></div><p>页面结构</p><div class = "main" ><div id= "f1" >测试1</div><div id= "f2" >测试2</div><div id= "f3" >测试3</div><div id= "f4" >测试4</div><div id= "f5" >测试5</div></div></div>
|
css
1 2 3 4 5 | .main div {height: 1000px;width: 300px;margin: 20px;background-color: #C0C0C0;
}#nav {position: fixed;width: 100px;height: 200px;top: 40%;right: 10px;
}#nav div {cursor: pointer;text-align: center;
}
|
js
1 2 3 4 5 6 7 8 9 | $( function () {
$(window).scroll( function () {
$( ".f" + i).css( "background-color" , "red" );
}
}
});
$( '#nav div' ).click( function () {
$( 'html,body' ).animate({scrollTop: $( "#" + this.className).offset().top}, 500);
});
|
全部代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html><head><meta charset= "utf-8" ><title>h5之scrollIntoView控制页面元素滚动</title><style> #myDiv {height: 900px;background-color: gray;}#roll_top {height: 900px;background-color: green;color: #FFF;font-size: 50px;position: relative;}#bottom {position: absolute;display: block;left: 0;bottom: 0;} .main div {height: 1000px;width: 300px;margin: 20px;background-color: #C0C0C0;}#nav {position: fixed;width: 100px;height: 200px;top: 40%;right: 10px;}#nav div {cursor: pointer;text-align: center;}</style></head><body><div><h2>scrollIntoView</h2><button id= "roll1" >scrollIntoView(false)</button><button id= "roll2" >scrollIntoView(true)</button><div><div id= "myDiv" ></div><div id= "roll_top" >scrollIntoView(ture)元素上边框与视窗顶部齐平<span id= "bottom" >scrollIntoView(false)元素下边框与视窗底部齐平</span></div></div></div><div><h2>scroll</h2><div id= "nav" ><div class = "f1" >floor1</div><div class = "f2" >floor2</div><div class = "f3" >floor3</div><div class = "f4" >floor4</div><div class = "f5" >floor5</div></div><p>页面结构</p><div class = "main" ><div id= "f1" >测试1</div><div id= "f2" >测试2</div><div id= "f3" >测试3</div><div id= "f4" >测试4</div><div id= "f5" >测试5</div></div></div><script>window.onload = function () {
document.querySelector( "#roll1" ).onclick = function () {
document.querySelector( "#roll_top" ).scrollIntoView(false);
};
document.querySelector( "#roll2" ).onclick = function () {
document.querySelector( "#roll_top" ).scrollIntoView(true);
};
}</script><script src= "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js?1.1.11" ></script><script>$( function () {
$(window).scroll( function () {
$( ".f" + i).css( "background-color" , "red" );
}
}
});
$( '#nav div' ).click( function () {
$( 'html,body' ).animate({scrollTop: $( "#" + this.className).offset().top}, 500);
});</script></body></html>
|
View Code
以上就是h5之scrollIntoView用法详解的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
值得一个的5个强大的html5api 函数
html5讲解之datatransfer对象
html5设置视频背景的方法介绍
html5新增标签有哪些?html5中新增的13种标签的简单介绍
css3和h5实现波纹特效实例代码
html5难学吗
分享一个html5实现拖放的实例代码
html5用什么工具开发
html5/css3 3d立方体旋转动画经典案例
html5规定元素的上下文菜单属性contextmenu
更多相关阅读请进入《scrollIntoView》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » h5之scrollIntoView用法详解