文档章节

scrollIntoView()设置滚动条位置,html5

龙哥ge
 龙哥ge
发布于 2017/07/20 11:07
字数 342
阅读 173
收藏 0
  1. <html>  
  2.     <head>  
  3.         <title>HTML5_ScrollInToView方法</title>  
  4.         <meta  charset="utf-8">  
  5.         <script type="text/javascript">  
  6.             window.onload = function(){  
  7.                 /*  
  8.                     如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法,  
  9.                 以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView()  
  10.                 作为标准方法。  
  11.                     scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,  
  12.                 调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么  
  13.                 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素  
  14.                 会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部  
  15.                 不一定齐平,例如:  
  16.                 //让元素可见  
  17.                 document.forms[0].scrollIntoView();  
  18.                 当页面发生变化时,一般会用这个方法来吸引用户注意力。实际上,为某个元素设置焦点也  
  19.                 会导致浏览器滚动显示获得焦点的元素。  
  20.                     支持该方法的浏览器有 IE、Firefox、Safari和Opera。  
  21.                 */  
  22.                   
  23.                   
  24.                 document.querySelector("#roll1").onclick = function(){  
  25.                     document.querySelector("#roll_top").scrollIntoView(false);  
  26.                 }  
  27.                 document.querySelector("#roll2").onclick = function(){  
  28.                     document.querySelector("#roll_top").scrollIntoView(true);  
  29.                 }  
  30.             }  
  31.         </script>   
  32.         
  33. </html>  

© 著作权归作者所有

上一篇: 手机下拉刷新
下一篇: js搜索
龙哥ge
粉丝 0
博文 69
码字总数 57107
作品 0
合肥
前端工程师
私信 提问
sessionStorage保存滚动条位置

1、localStorage、sessionStorage他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。 2、localStorage生命周期是永久,这意味...

少年已不再年少
2018/08/20
0
0
说说 vue-router 组件的高级应用

1 动态设置页面标题 页面标题是由 来控制的,因为 SPA 只有一个 HTML,所以当切换到不同的页面时,标题是不会发生变化的。必须通过 JavaScript 来修改 中的内容: 有一种思路是在每个页面的 ...

deniro
04/05
0
0
苹果上线完全用HTML5编写的新版官网

苹果于1月27日上线了全新的官方网站(http://www.apple.com/),网站页面整体采用HTML5编写,整体载入速度明显提高。 页面顶端的导航条的搜索框长度会自动扩展。产品介绍页面的切换方式(htt...

keith
2011/01/30
2K
3
好程序员教程之配置H5的滚动条样式示例代码

配置H5的滚动条样式示例代码有不少的小伙伴在网上寻找,本篇文章好程序员小编和大家分享一下配置H5的滚动条样式示例代码,希望对HTML5开发感兴趣的小伙伴有所帮助,下面我们一块来看一下吧:...

好程序员IT
03/22
0
0
7 个效果震憾的 HTML5 应用组件

在HTML5的世界里,任何文本、图像都可以变得令人难以想象,很多HTML5应用也都已经随着浏览器的升级而变得运行飞速,而且兼容性也越来越好。下面为大家介绍7款效果震憾的HTML5应用组件,HTML5...

yykj
2013/07/02
10.4K
19

没有更多内容

加载失败,请刷新页面

加载更多

基础工具类

package com.atguigu.util;import java.sql.Connection;import java.sql.SQLException;import java.util.Properties;import javax.sql.DataSource;import com.alibaba.druid......

architect刘源源
今天
43
0
P30 Pro劲敌!DxO官宣新机:排行榜又要变

5月26日晚间,DxOMark官方推特预告,将在5月27日公布一款新机型的DxOMark评分,猜猜是哪款? 网友猜想的机型有:红米K20、谷歌Pixel 3a、索尼Xperia 1、诺基亚9 PureView等。 DxOMark即将公布...

linux-tao
昨天
15
0
Ubuntu18.04.2窗口过小不能自适应(二次转载)

解决Ubuntu在虚拟机窗口不能自适应 2018年09月06日 16:20:08 起不了名儿 阅读数 855 此博文转载:https://blog.csdn.net/nuddlle/article/details/77994080(原地址) 试了很多办法这个好用 ...

tahiti_aa
昨天
2
0
死磕 java同步系列之CountDownLatch源码解析

问题 (1)CountDownLatch是什么? (2)CountDownLatch具有哪些特性? (3)CountDownLatch通常运用在什么场景中? (4)CountDownLatch的初始次数是否可以调整? 简介 CountDownLatch,可以...

彤哥读源码
昨天
6
0
Nginx提供下载apk服务

有时候我们可能需要提供文件或者其他apk下载链接,通过 nginx 配置可以很简单地实现。 server {    listen 80;    server_name download.xxx.com;    root app;    locati...

Jack088
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部