h5之scrollIntoView控制页面元素滚动
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()作为标准方法。scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平.
一、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:;
bottom:;
}
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>
h5之scrollIntoView控制页面元素滚动的更多相关文章
- JS/jquery实现鼠标控制页面元素显隐
最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...
- asp.net core根据用户权限控制页面元素的显示
asp.net core根据用户权限控制页面元素的显示 Intro 在 web 应用中我们经常需要根据用户的不同允许用户访问不同的资源,显示不同的内容,之前做了一个 AccessControlHelp ...
- scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动，还有水平滚动
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...
- [ofbiz]screen中应用form和ftl，控制页面元素属性
可以在screen中定义form与ftl两个文件,ftl中可以使用js控制form中的页面元素属性. 控制元素是否可编辑: $("#oaDataReport_budget&qu ...
- 如何在CSS中映射的鼠标位置，并实现通过鼠标移动控制页面元素效果
映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...
- AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。
SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...
- js控制页面每次滚动一屏，和楼梯效果
我最近在做我们公司官网的改版,产品中心就是每次滚一屏的,我觉得加上楼梯更方便用户浏览,就随便写了个demo, 先来看看结构,都很简单的 <!--楼梯--> <ul class=&qu ...
- js控制页面元素值
// TODO id 定位 var ele1 = document.getElementById("test1"); // alert(ele1.value) // TODO 根据 ...
- vue中监听页面滚动和监听某元素滚动
①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...
随机推荐
- C# 在iis windows authentication身份验证下，如何实现域用户自动登录
前言: 该博文产生的背景是有个项目在客户那部署方式为iis windows身份验证,而客户不想每次登录系统都要输入帐号和密码来登录. 因此需要得到域用户,然后进行判断该用户是否可以进入系统. 解决方法 ...
- 纯真IP数据库格式详解
纯真版IP数据库,优点是记录多,查询速度快,它只用一个文件QQWry.dat就包含了所有记录,方便嵌入到其他程序中,也方便升级.缺点是你想要编辑它却是比较麻烦的,由于其文件格式的限制,你要直接添加IP ...
- 读《Java并发编程的艺术》（一）
离开博客园很久了,自从找到工作,到现在基本没有再写过博客了.在大学培养起来的写博客的习惯在慢慢的消失殆尽,感觉汗颜.所以现在要开始重新培养起这个习惯,定期写博客不仅是对自己学习知识的一种沉淀,更是在督 ...
- Ionic集成ArcGIS JavaScript API.md
1. Ionic同原生ArcGIS JavaScript API结合 1.1. 安装esri-loader 在工程目录下命令行安装: npm install angular2-esri-loader ...
- 【JAVAWEB学习笔记】04_JavaScript
晨读单词: onmouseover:鼠标移入 onmouseout:鼠标移出 attribute:属性 node:节点 document:文档 element:元素 textNode:文本节点 app ...
- Eclipse Java 关联源码
今天打代码的时候打算看看Java的源码是怎么实现的 没想到还没关联源码 遇到上面的情况只需要关联下源码就可以对着方法按F3查看JAVA的开源代码. 解决上面如下: 找到jdk的安装目录 找到src.z ...
- 初次尝试Linux并记录一二
假如我有一个Linux系统 安装过程:加载中... 版本:Ubuntu Server 16.04.1 LTS 64位 得到一个IP:*.*.*.* 下载工具 WinSCP: WinSCP是一个Wind ...
- 一次基于Vue.Js用户体验的优化
.mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑 ...
- Bash Scripting Learn Notes
References: [1] http://www.tldp.org/LDP/Bash-Beginners-Guide/html/ 1. Executing programs from a scri ...
- CentOS-Zabbix-agent客户端的编译安装
系统环境: CentOS 6.7 官网下载安装包:http://www.zabbix.com/download 本文用的是Zabbix 3.0 LTS 上传至客户端服务器并解压 .tar.gz 进入解 ...