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#基础知识-流程控制的应用（四）
流程控制我们在编程中运用到的地方非常的多,在上篇中仅仅只是简单的介绍每一种的使用,并没有运用到实例中,很难去理解它真正的作用.下面我们将实际的运用流程控制的代码写一些实例相关的程序,加深对流程控制的理 ...
- IOS的自定义控件
这里做一个类似于下面界面的小案例 1.创建一个空的布局文件 .xib new File -->User Interface -->选择View 创建一个空的view ,会自动生成一个 .x ...
- js闭包绑定元素
闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状 ...
- OpenStack修复影响宿主机的QEMU漏洞CVE-2017-2615
距离这个虚拟化层面的漏洞公告发出已有两个多月了,漏洞详情可以查看: 360安全应急响应中心-360发现QEMU严重漏洞 影响国内大部分公有云 简单来说是通过Cirrus VGA操作读取宿主机内存中的内 ...
- 通过js给网页加上水印背景
有些后端管理系统,因为业务逻辑的需要,需要加上水印,下面就是水印方法. function watermark(settings) { debugger; //默认设置 var defaultSetti ...
- dbunit进行DAO层Excel单元测试
DAO层测试难点 可重复性,每次运行单元测试,得到的数据是重复的 独立性,测试数据与实际数据相互独立 数据库中脏数据预处理 不能给数据库中数据带来变化 DAO层测试方法 使用内存数据库,如H2.优点: ...
- 集群/分布式环境下5种session处理策略
转载自:http://blog.csdn.net/u010028869/article/details/50773174?ref=myread 前言 在搭建完集群环境后,不得不考虑的一个问题就是用户访 ...
- 基于Android的上课助手的概况及第一周冲刺详情
基于Android平台的上课助手 一. 功能简介 课表查询 课程提醒 空闲教室的查询 二. 开发环境 Android 三. 开发成员 组长:李志岩 成员:王亚蕊.孙 ...
- jsp的自定义标签 控制jsp内容显示
引入方式示例 <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> tld文件 <?x ...
- R语言与分类算法的绩效评估（转）
关于分类算法我们之前也讨论过了KNN.决策树.naivebayes.SVM.ANN.logistic回归.关于这么多的分类算法,我们自然需要考虑谁的表现更加的优秀. 既然要对分类算法进行评价,那么我们 ...