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) }, 在方法 ...
随机推荐
- Configure Red Hat Enterprise Linux shared disk cluster for SQL Server——RHEL上的“类”SQL Server Cluster功能
下面一步一步介绍一下如何在Red Hat Enterprise Linux系统上为SQL Server配置共享磁盘集群(Shared Disk Cluster)及其相关使用(仅供测试学习之用,基础篇) ...
- Hadoop中MapReduce作业流程图
MapReduce的流程分为11个步骤,4个实体 1.客户端:编写MapReduce的代码,配置作业,提交作业 2.JobTracker:初始化作业,分配作业,与TaskTracker通信,协调整个作 ...
- git常用命令记录
配置本地仓库 git config --global user.name.git config --global user.email 查看配置详情 git config -l 初始仓库 git in ...
- http协议中:GET/POST/PUT/DELETE/TRACE/OPTIONS/HEAD方法
###1 HTTP/1.1协议中共定义了八种方法(有时也叫"动作")来表明Request-URI指定的资源的不同操作方式: OPTIONS 返回服务器针对特定资源所支持的HTTP请 ...
- 2017 UESTC Training for Graph Theory
图论姿势太弱,这套题做了好久.. A:枚举最短那条边,然后最小生成树那种操作,1 和 n 联通就算答案 B:考虑到假如我们能凑出x的话,那很明显我们也能凑出任意数表示x + ai,考虑选取一个ai,然 ...
- C#访问ORALCE数据库
随着时间的推移知识也在更新,原来可用的技术也会被淘汰或更新. framework4.0开始不再支持System.Data.OracleClient了,但是令人欣慰的是ORACLE公司自己出了一个Ora ...
- Spring Boot 声明式事务结合相关拦截器
我这项目的读写分离方式在使用ThreadLocal实现的读写分离在迁移后的偶发错误里提了,我不再说一次了,这次是有要求读写分离与事务部分要完全脱离配置文件,程序员折腾了很久,于是我就查了一下,由于我还 ...
- fiddler导致页面确定按钮无法使用（测试遇到的问题经验）
这几天在测试的是遇到几个问题,就是在删除或者保存有些提示信息的时候 比如下面这种: 点击确定的时候,一直无响应,换了几台电脑其他电脑都是正常的,本机清楚缓存.关闭浏览器重新打开.重启电脑都试过了了就是 ...
- Your data vis “Spidey-sense” & the need for a robust “utility belt”
@theboysmithy did a great piece on coming up with an alternate view for a timeline for an FT piece. ...
- 深度解析PHP数组函数array_slice
看到array_slice()这个函数让我想起了VFP中的range这个范围取值的子句 这个函数一共有四个参数: 被取值的数组(必需) 取值的起始位置(必需) 取值的终止位置,如果不填写默认到数组最后 ...