DOM的滚动

DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器实现了相应的方法,可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型的扩展存在,所以它能在所有元素上使用。

1、scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持

2、scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视窗的可见范围内不可见的情况下,才滚动浏览器窗口或容器元素,最终让当前元素可见。如果当前元素在视窗中可见,这个方法不做任何处理。如果将可选参数alignCenter设置为true,则表示尽量将元素显示在视窗中部(垂直方向)------Safari、Chrome实现了这个方法

3、scrollByLines(lineCount) 将元素的内容滚动指定的行数的高度,lineCount的值可以为正值或是负值。---Safari、Chrome实现了这个方法

4、scrollByPages(pageCount) 将元素的内容滚动指定的页面的高度,具体高度由元素的高度决定。---Safari、Chrome实现了这个方法

scrollIntoView()和scrollIntoVIewIfNeeded()作用的是元素的窗口,而scrollByLines()、scrollByPages()影响元素自身,下面是几个示例:

//将页面主体滚动5行

document.body.scrollByLines(5);

//确保当前元素可见

document.getElementById(“test”).scrollIntoView();

//确保只在当前元素不可见的情况下才使其可见

document.getElementById(“test”).scrollIntoViewIfNeeded();

//将页面主体往回滚1页

doument.body.scrollByPages(-1);

由于只有scrollIntoView被各浏览器均支持,所以这个方法最为常用。

/***************************/

以上内容摘自《JavaScript高级程序设计(第2版)》

/*************************/

以前看QQ邮箱有一个效果,研究一番后找到使用scrollIntoView做到的,示例再放一个。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ScrollIntoView</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* {margin:0; padding:0;}
body {background-color:#FFFFFF;}
td,input,button,select,body {font-family:"lucida Grande",Verdana;font-size:12px;}
.ico_big{float:left;margin:2px 8px 0 0;}
img{border:none;}
.toolbg a, .attbg a {color:#244281;}
.txt_left{text-align:left;}
.attbg {background-color:#e8edf4;}
.toolbg {background-color:#D2DBEA;}
</style>
</head>
<body>
<div style="margin:10px auto; width:500px;padding:50px; border:1px solid #ccc;">
<span onClick="ScrollToAttach();" style="cursor:pointer">
<a id="linkAttachment"><img src="http://m369.mail.qq.com/zh_CN/htmledition/images/newicon/fj_min/fu_rar.gif" align="absmiddle" />可以点击我试试!</a>
</span>
<div style="margin:500px;"></div>
<div id="attachment" style="padding:2px;margin-bottom:15px;*margin-bottom:5px;display: color:#666;" class="attbg">
<div style="padding:6px 0 10px 6px;" class="txt_left">
   <b style="font-size:14px;">
    <img src="http://res.qqmail.com/zh_CN/htmledition/images/icon_att3476l.gif" align="absmiddle" class="showattch" border="0"/> 附件
   </b>(<span id="attachmentCount">1</span> 个)
</div>
<div style="padding:0 8px 6px 12px;background:#fff;line-height:140%;">
   <div class="graytext clr" style="padding-top:12px;">
    <b style="color:#000;font-weight:bold;font-size:12px;" >普通附件</b>
    <div style="padding:1px 0 0 0; color:#666;">(已通过卡巴斯基杀毒引擎扫描)</div>
   </div>
   <div style="margin-top:10px;">
    <div class="ico_big">
     <a href="javascript:;">
      <img style="width:auto;" src="http://m369.mail.qq.com/zh_CN/htmledition/images/newicon/fj_max/fu_rar.gif"/>
     </a>
    </div>
    <div class="name_big">
     <span>ecomstore.tar</span><span class="graytext">&nbsp;(1.46M)</span>
     <div class="down_big" >
      <a title="请直接点击或鼠标右键转下载工具打开,请不要拖拽到下载工具悬浮框中" href="javascript:;" >下载</a>&nbsp;&nbsp;
      <a href="javascript:;">打开</a>&nbsp;&nbsp;
      <a href="javascript:;">在线预览</a>&nbsp;&nbsp;
      <a href="javascript:;">保存到我的随身盘</a>
     </div>
    </div>
   </div>
   <div class="clr" style="height:8px;overflow:hidden"></div>
</div>
</div>
<div style="margin:900px;"></div>
</div>
<button style="position:absolute; top:600px; left:100px; width:200px;" onclick="scrollIntoViewHandler(this)">使用scrollIntoView:true</button>
<script type="text/javascript">   1:     2: function scrollIntoViewHandler(_this) {   3:    if(_this.flag) {   4:     _this.innerHTML = _this.innerHTML.replace(/false/, 'true');   5:     _this.flag = false;   6:    } else {   7:     _this.innerHTML = _this.innerHTML.replace(/true/, 'false');   8:     _this.flag = true;   9:    }  10:    document.getElementById("attachment").scrollIntoView(_this.flag);  11: }  12: function ScrollToAttach(vq) {  13: vq = vq || "attachment";  14: var bw = document.getElementById(vq);  15: if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {  16:    //bw.scrollIntoView(document.documentElement.clientHeight < bw.offsetHeight);  17:    bw.scrollIntoView(false);  18: }  19: Splash(vq, 4);  20: }  21: /**  22: * 滚动至...  23: * @param {Object} vq  24: * @param {Object} times  25: * @param {Object} isNotInit  26: */  27: function Splash(vq, times, isNotInit) {  28:     var ah = arguments.callee,  29:    afx = document.getElementById(vq);  30:     if (!isNotInit || !ah.time) {  31:         ah.orgclass = afx.className;  32:         ah.time = 0;  33:     }  34:     afx.className = (ah.time % 2 == 0) ? "toolbg": ah.orgclass;  35:     if (++ah.time < times) {  36:         setTimeout(function() {  37:             Splash(vq, times, true);  38:         }, 70);  39:     }  40: }</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ScrollIntoView</title> <style type="text/css"> * {margin:0; padding:0;} body {background-color:#FFFFFF;} td,input,button,select,body {font-family:"lucida Grande",Verdana;font-size:12px;} .ico_big{float:left;margin:2px 8px 0 0;} img{border:none;} .toolbg a, .attbg a {color:#244281;} .txt_left{text-align:left;} .attbg {background-color:#e8edf4;} .toolbg {background-color:#D2DBEA;} </style> </head> <body> <div style="margin:10px auto; width:500px;padding:50px; border:1px solid #ccc;"> <span onClick="ScrollToAttach();" style="cursor:pointer"> <a id="linkAttachment"><img src="http://m369.mail.qq.com/zh_CN/htmledition/images/newicon/fj_min/fu_rar.gif" align="absmiddle" />可以点击我试试!</a> </span> <div style="margin:500px;"></div> <div id="attachment" style="padding:2px;margin-bottom:15px;*margin-bottom:5px;display: color:#666;" class="attbg"> <div style="padding:6px 0 10px 6px;" class="txt_left"> <b style="font-size:14px;"> <img src="http://res.qqmail.com/zh_CN/htmledition/images/icon_att3476l.gif" align="absmiddle" class="showattch" border="0" /> 附件 </b>(<span id="attachmentCount">1</span> 个) </div> <div style="padding:0 8px 6px 12px;background:#fff;line-height:140%;"> <div class="graytext clr" style="padding-top:12px;"> <b style="color:#000;font-weight:bold;font-size:12px;" >普通附件</b> <div style="padding:1px 0 0 0; color:#666;">(已通过卡巴斯基杀毒引擎扫描)</div> </div> <div style="margin-top:10px;"> <div class="ico_big"> <a href="javascript:;"> <img style="width:auto;" src="http://m369.mail.qq.com/zh_CN/htmledition/images/newicon/fj_max/fu_rar.gif" /> </a> </div> <div class="name_big"> <span>ecomstore.tar</span><span class="graytext"> (1.46M)</span> <div class="down_big" > <a title="请直接点击或鼠标右键转下载工具打开,请不要拖拽到下载工具悬浮框中" href="javascript:;">下载</a>   <a href="javascript:;">打开</a>   <a href="javascript:;">在线预览</a>   <a href="javascript:;">保存到我的随身盘</a> </div> </div> </div> <div class="clr" style="height:8px;overflow:hidden"></div> </div> </div> <div style="margin:900px;"></div> </div> <button style="position:absolute; top:600px; left:100px; width:200px;" onclick="scrollIntoViewHandler(this)">使用scrollIntoView:true</button> </body> </html> 预览代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一道二栏布局题目

    <div id="wrapper">     <div>C</div>     <div>A</div>     <div>B</d...

    meteoric
  • “穿透”层的鼠标事件

    需要实现如下的效果,有一个浮动层,需要层级在它之下的一个元素也能照常响应相应的事件

    meteoric
  • 网页布局之九宫格

    九宫格虽然嵌套了一些标签,但对于IE6、IE7来讲为了达到预期的美术效果,这中间需要进行权衡;无论怎么讲,他还是很多精华之处。

    meteoric
  • Css学习手册之基本篇

    Css学习手册之基本篇 每次写前端都是一个痛苦的过程,总是静不下来,彻底的研究下前端的技术,导致每次套页面都是直接采用一些封装好的控件,而有时对这些样式不满意时...

    小灰灰
  • 原 css3+js随机文字动画

    魂祭心
  • 长度单位、calc() 表达式

    (adsbygoogle = window.adsbygoogle || []).push({});

    双面人
  • 杨老师课堂之JavaScript定时器案例的红绿灯设计

    杨校
  • 设计师会编程、程序员懂艺术:Semi Flat Design

    本公众号定期更新关于 设计师、程序员发挥创意 互相融合的指南、作品。 主要技术栈: nodejs、react native、electron 本号正在更新的系列...

    mixlab
  • css3 过渡和2d变换——回顾

    1.transition   语法:transition: property duration timing-function delay;       tr...

    用户1197315
  • js动画之无缝滚动

    skylark

扫码关注云+社区

领取腾讯云代金券