HTML5_ScrollInToView方法
scrollIntoView(ture)元素上边框与视窗顶部齐平
scrollIntoView(false)元素下边框与视窗底部齐平
<html>
<head>
<title>HTML5_ScrollInToView方法</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
/*
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，
以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()
作为标准方法。
scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，
调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么
窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素
会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部
不一定齐平，例如：
//让元素可见
document.forms[0].scrollIntoView();
当页面发生变化时，一般会用这个方法来吸引用户注意力。实际上，为某个元素设置焦点也
会导致浏览器滚动显示获得焦点的元素。
支持该方法的浏览器有 IE、Firefox、Safari和Opera。
*/ document.querySelector("#roll1").onclick = function(){
document.querySelector("#roll_top").scrollIntoView(false);
}
document.querySelector("#roll2").onclick = function(){
document.querySelector("#roll_top").scrollIntoView(true);
}
}
</script>
<style type="text/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;
}
</style>
</head>
<body>
<button id="roll1">scrollIntoView(false)</button>
<button id="roll2">scrollIntoView(true)</button>
<div id="myDiv"></div>
<div id="roll_top">
scrollIntoView(ture)元素上边框与视窗顶部齐平
<span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</span>
</div>
</body>
</html>
HTML5_ScrollInToView方法的更多相关文章
- HTML5中的DOM新特性
元素下的classList属性 classList属性下面有四个方法: add(value): 添加,已存在的属性不添加 remove(value):删除属性 contain(value):检测属性是 ...
- javaSE27天复习总结
JAVA学习总结 2 第一天 2 1:计算机概述(了解) 2 (1)计算机 2 (2)计算机硬件 2 (3)计算机软件 2 (4)软件开发(理解) 2 (5) ...
- mapreduce多文件输出的两方法
mapreduce多文件输出的两方法 package duogemap; import java.io.IOException; import org.apache.hadoop.conf ...
- 【.net 深呼吸】细说CodeDom（6）：方法参数
本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...
- IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
- 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例
前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...
- [C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
- ArcGIS 10.0紧凑型切片读写方法
首先介绍一下ArcGIS10.0的缓存机制: 切片方案 切片方案包括缓存的比例级别.切片尺寸和切片原点.这些属性定义缓存边界的存在位置,在某些客户端中叠加缓存时匹配这些属性十分重要.图像格式和抗锯齿等 ...
- [BOT] 一种android中实现“圆角矩形”的方法
内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...
随机推荐
- web开发架构设计
2015-07-31 13:10:38 一, web服务器 .负载均衡 .不做对URL的rewrite逻辑判断, 全部转发到代码服务器的单一入口文件, 由代码去全权处理 二, 代码服务器(常跟web服 ...
- jquery若干问题
1.获取服务器端的控件 $("#<%=photopath.ClientID%>").uploadPreview({ Img: "ImgPr", Wi ...
- winrt控件
http://www.mindscapehq.com/products/metroelements 常见的翻书,相册,图表,时间组件 demo下载地址http://assets.mindscape.c ...
- 自定义Button 的图片设置不显示问题。
如果你是自定义button 那么你设置图片就要用 button.imageView.image = [UIImage imageName:@""]; 如果你是给系统原生的butt ...
- 一个.xib界面文件中设计有多个View
一个新建的.xib文件(Xcode's Interface Builder),有一个默认的View,也就是self.view,是主视图 其他新建的View可以在viewDidLoad()函数中使用 [ ...
- Express 4 中如何使用connect-mongo
正在跟随上面的教程一步一步做,在会话支持那一节中安装 connect-mongo 后,添加: var MongoStore = require('connect-mongo')(express); v ...
- C 替换字符方法
// 444.cpp : Defines the entry point for the console application. // #include "stdafx.h" # ...
- iOS - UIButton设置图片文字上图下文排列
经查阅资料及尝试,最终解决了在图片和文字垂直排列的情况下,如果文字长度变化会导致图片位置变动的问题,最开始采用了网上比较多的做法,做法如下: @interface UIButton (UIButton ...
- Stuts2的"struts.devMode"设置成true后，不起作用，仍需要重启tomcat
在项目的struts.xml加入了常量配置:<constant name="struts.devMode" value="true" />后,重启服 ...
- cascade 介绍与用法 （ oracle）
级联删除,比如你删除某个表的时候后面加这个关键字,会在删除这个表的同时删除和该表有关系的其他对象 1.级联删除表中的信息,当表A中的字段引用了表B中的字段时,一旦删除B中该字段的信息,表A的信息也自动 ...