不经意的时候看到QQ邮箱收到附件的时候，有一个效果，如下图所示：
比较好奇的就抓了一下节点，然后看了一下源代码，主要使用了这样一个函数：scrollIntoView
scrollIntoView 看到这个函数名的时候，其实也能联想到它的作用(功能)，将一个对象显示在当前window窗口的可视范围之内。
这个是W3C定义的DOM方法，各浏览器均支持，包括：IE5.5+、FF2.0+....
可以到PPK的博客中查看更详细的介绍：http://www.quirksmode.org/dom/w3c_cssom.html
可以点击链接查看Demo:http://www.quirksmode.org/dom/tests/scrollintoview.html
不过上面并未介绍它的参数，具体参数说明可以看这里：
http://msdn.microsoft.com/en-us/library/ms536730(VS.85).aspx
语法：
object.scrollIntoView( [bAlignToTop])
参数：
bAlignToTop 布尔型：true/false，默认参数不传则为true
它们分别代表不同的含义。
true:如果滚动条足够长，则将对象的顶端与当前窗口的顶部对齐，如下图：
false:对象的底端与当前窗口的顶端对齐，如下图：
而要实现闪烁的效果则是使用装饰的特性：延时执行函数，切换对象的样式 70毫秒切换一次，上面的效果总花切换了4次（调用了4次函数）。
Demo的源码（拷贝时请注意编码，我使用的是utf-8）：
<!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> new document </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"> (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>
<script type="text/javascript">
function scrollIntoViewHandler(_this) {
if(_this.flag) {
_this.innerHTML = _this.innerHTML.replace(/false/, 'true');
_this.flag = false;
} else {
_this.innerHTML = _this.innerHTML.replace(/true/, 'false');
_this.flag = true;
}
document.getElementById("attachment").scrollIntoView(_this.flag);
}
function ScrollToAttach(vq) {
vq = vq || "attachment";
var bw = document.getElementById(vq);
if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
//bw.scrollIntoView(document.documentElement.clientHeight < bw.offsetHeight);
bw.scrollIntoView(false);
}
Splash(vq, 4);
}
/**
* 滚动至...
* @param {Object} vq
* @param {Object} times
* @param {Object} isNotInit
*/
function Splash(vq, times, isNotInit) {
var ah = arguments.callee,
afx = document.getElementById(vq);
if (!isNotInit || !ah.time) {
ah.orgclass = afx.className;
ah.time = 0;
}
afx.className = (ah.time % 2 == 0) ? "toolbg": ah.orgclass;
if (++ah.time < times) {
setTimeout(function() {
Splash(vq, times, true);
}, 70);
}
}
</script>
</body>
</html>
分享到：
相关推荐
前端项目-jquery-scrollintoview,jquery scrollintoview（）插件和：可滚动选择器过滤器
类似于用于 Web 的DOMElement.scrollIntoView() ，但有一些额外功能。 yarn add react-native-scroll-into-view// ornpm install react-native-scroll-into-view --save没有本机代码：这个库与 Expo 管理的工作流程...
上下2个大小的ScrollView显示图片。
jQuery.scrollIntoView 当将DIV滚动到浏览器的可见部分中或滚动出时，它会执行一个功能。 安装 bower install jquery-scrollIntoView npm install jquery-scrollintoview 用法 $ .scrollIntoView（安装，卸载一次）...
这样如果把滚动条拉到底部的时候点击修改（或者修改后点击更新，取消）页面重新加载的时候都会把滚动条拉到页面最上面部分 ，特此我将下面知识共享一下: object.scrollIntoView( [bAlignToTop]) Parameters ...
有多种解决方法，例如使用 jQuery，但这在运行 Selenium 测试时可能会出现问题，如下所示： WebElement element = driver . findElement( By . id( " my-id " )); Actions actions = new Actions (driver); actions ...
jquery.scrollIntoView 滚动元素进入视图时触发回调
css3动画效果，js动画效果，wow动画说明以及在网站中的应用
此后，CSS工作组决定在Element.scrollIntoView实现其功能，方法是使用scrollMode: "if-needed"选项。 因此，对该库进行了重写，以实现该规范，而不是即将弃用的规范。 安装 yarn add scroll-into-view-if-needed ...
1，源代码解决键盘遮挡 2，使用超简单 3，不需要引入一大堆工具，类，文件 4，思路清晰化繁为简
NULL 博文链接：https://johnson-gong.iteye.com/blog/2149221
var scrollIntoView = require ( 'scroll-into-view' ) ; 用它 scrollIntoView ( someElement ) ; 您可以传递设置来控制时间，缓动以及父项是否是可滚动的有效元素以及对齐方式： 所有选项都是可选的。 ...
DOM Compatibility with Internet Explorer 4 Section 17.4. DOM Compatibility with Netscape 4 Section 17.5. Convenience Methods: The Traversal and Range APIs Chapter 18. Cascading Style Sheets ...
问题：如下图 解决方案 scrollIntoView ... * 使用方法 输入框中 onclick=sr(this); onblur=nosr(this) */ var timer1; function sr(obj) { timer1 = setInterval(function() { obj.scrollIntoView(false); },
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()
Vaadin 7 的动画滚动视图插件 动画滚动到视图允许滚动到可滚动面板内的组件 下载版本 此附加组件的正式版本将很快在 Vaadin 目录中提供。 发行说明 版本 0.1.0 首次公开发布 问题跟踪 ... 感谢所有错误报告和功能请求...
您需要将此项目从静态项目转换为交互式项目。... 首先，打开js/app.js并开始构建应用程序的功能有关具体... 来自w3School 的 scrollIntoView 。 文档片段() 设置超时并将其清除，如建议中所述创建导航栏通过 querySelecto
'smooth' } 没有该选项，默认为人工平滑滚动（smooth），以保持现有行为此行为将来可能会改变，默认为离散滚动（自动），以更好地符合 HTML DOMElement.scrollIntoView 标准在过渡期间，请始终传递 { behavior: '...
然后需要获取到列表对应的id值，直接使用 document.getElementById(it).scrollIntoView(); 具体实现： 列表：使用vue的v-for指令 ，这里的id值使用的是遍历的索引值，外层是一个自定义滚动条组件。样式也是使用vue指
主要介绍了 在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案,需要的朋友可以参考下