h5之scrollIntoView控制页面元素滚动
2017-06-23 22:33
519 查看
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()作为标准方法。scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平.
全部代码
View Code
一、scrollIntoView
html
<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
#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
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
<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
.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
$(function () {
$(window).scroll(function () {//为页面添加页面滚动监听事件
var wst = $(window).scrollTop(); //滚动条距离顶端值
for (var i = 1; i < 6; i++) { //加循环
if ($("#f" + i).offset().top <= wst + 10) { //判断滚动条位置
$('#nav div').css("background-color", "white");
$(".f" + i).css("background-color", "red");
}
}
});
$('#nav div').click(function () {
$('html,body').animate({scrollTop: $("#" + this.className).offset().top}, 500);
// $("#" + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()
});
});全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>h5之scrollIntoView控制页面元素滚动</title>
<style>
/*scrollIntoView*/
#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;
}
/*scroll*/
.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 () {
/*
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。
在各种专有方法中，HTML5选择了scrollIntoView()作为标准方法。scrollIntoView()可以在所有的HTML元素上调用，
通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，
那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平.
*/
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"></script>
<script>
$(function () {
$(window).scroll(function () {//为页面添加页面滚动监听事件
var wst = $(window).scrollTop(); //滚动条距离顶端值
for (var i = 1; i < 6; i++) { //加循环
if ($("#f" + i).offset().top <= wst + 10) { //判断滚动条位置
$('#nav div').css("background-color", "white");
$(".f" + i).css("background-color", "red");
}
}
});
$('#nav div').click(function () {
$('html,body').animate({scrollTop: $("#" + this.className).offset().top}, 500);
// $("#" + this.className)[0].scrollIntoView(true);//h5 scrollIntoView()
});
});
</script>
</body>
</html>
View Code
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript的scrollIntoView方法,控制页面锚点
- [前端] scrollIntoView 滚动当前元素，进入浏览器的可见区域
- ScrollInToView方法(滚动页面)
- javascript通过改变滚动条滚动来显示某些元素的scrollIntoView()方法
- 页面元素的定位scrollintoview
- 使用scrollIntoView方法定位页面元素---小结
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
- scrollIntoView()窗口滚动
- 使用iframe window的scroll方法控制iframe页面滚动
- fm.revealator.jquery.js 滚动页面，控制页面元素逐一出来
- 控制滚动标签元素的同时不滚动页面
- Android 真机，微信打开 H5，切换到 webview，能通过 webdriver 方法操作页面元素，然后链接到新的 H5 页面后，无法操作元素，appium 服务器没有收到 response，
- 提交页面的定位--scrollIntoView的用法
- 提交页面的定位--scrollIntoView的用法
- [原]提交页面的定位--scrollIntoView的用法
- 【微信小程序】解决 竖向<scroll-view>组件 “竖向滚动页面出现遮挡”问题
- scrollIntoView() 页面定位
- Android 自定义 HorizontalScrollView 实现图片左右滚动按钮控制
- jquery控制页面元素跟随滚动
- 使用 HorizontalScrollView 实现滚动控制