谷歌浏览器的scrolltop 谷歌浏览器的使用方法

大家好，如果您还对谷歌浏览器的scrolltop不太了解，没有关系，今天就由本站为大家分享谷歌浏览器的scrolltop的知识，包括谷歌浏览器的使用方法的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

本文目录

jsp里怎么让div固定在浏览器某个位置不动
Scrollamount和scrolldelay分别表示什么意思
多个div横行排列,并随着浏览器窗口的大小拉伸,是如何实现的
scroll、touchmove性能优化技巧

一、jsp里怎么让div固定在浏览器某个位置不动

1、这个跟jsp没有关系的...你可以在css里控制...

2、#glideDiv0{position:fixed; bottom:0;left:0; width:100%; background:#F00;}

3、#glideDiv0{_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop));}

4、#glideDiv0{_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

5、这两段代码只能实现在最底部跟最顶部，你可以使用 _margin-top:10px;或者 _margin-bottom:10px;修改其中的数值控制元素的位置。

6、现在，问题还没有完全解决。在用了上面的办法后，你会发现：被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS文件中加入：

7、*html{background-image:url(about:blank);background-attachment:fixed;}

二、Scrollamount和scrolldelay分别表示什么意思

scrollamount是滚动标签<marquee>的滚动延时属性。

在<marquee>代码中 scrollAmount参数的意思如下移动速度。用于设定滚动的速度。此属性不是必须使用的。我们给scrollAmount的参数设为3（这个命令使用时不能低于1否则不起作用的。数值越大，移动速度也越快,）。例：<marquee scrollAmount=3>我走的很慢</marquee>。一般情况下设为1或2的数值就差不多了。

是滚动标签<marquee>的滚动延时属性SCROLLDELAY

在<marquee>代码中，scrolldelay参数的意思如下：

用于设定两次滚动操作之间的间隔时间，该时间以毫秒为单位。此属性不是必须使用的。

我们给scrolldelay的参数设为1000，单位为毫秒（数值越大，时间间隔也越大）。

例：<marquee scrolldelay=1000>我走一走，停一停</marquee>

marquee标签是HTML标签中创建文字滚动的标签。

1、direction表示滚动的方向，值可以是left，right，up，down，默认为left；

2、behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）；

3、loop表示循环的次数，值是正整数，默认为无限循环；

4、scrollamount表示运动速度，值是正整数，默认为6；

5、scrolldelay表示停顿时间，值是正整数，默认为0，单位是毫秒；

6、valign表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle；

7、align表示元素的水平对齐方式，值可以是absbottom：绝对底部对齐（与g、p等字母的最下端对齐），absmiddle：绝对中央对齐，baseline：底线对齐，bottom：底部对齐（默认），left：左对齐，middle：中间对齐，right：右对齐，texttop：顶线对齐，top：顶部对齐；

8、bgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色；

9、height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度；

10、hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素；

参考资料来源：百度百科-标签<marquee>属性

参考资料来源：百度百科-scrolldelay

参考资料来源：百度百科-scrollamount

三、多个div横行排列,并随着浏览器窗口的大小拉伸,是如何实现的

div#container{margin-left: auto; margin-right: auto;}在css中加上这段代码使页面居中给你一个实例<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"" "><html xmlns=" "><head><meta http-equiv="content-type" content="text/html; charset=gb2312"/><title>自适应满屏高度的布局</title><style type="text/css">html{height:100%;max-height:100%;padding:0;margin:0;border:0;background:#fff;font-size:76%;font-family:georgia, palatino linotype, times new roman, serif,"宋体";overflow: hidden;}

html{ scrollbar-face-color:orange; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#c00; scrollbar-3dlight-color:#c00; scrollbar-arrow-color:#000; scrollbar-track-color:#c0c0c0; scrollbar-darkshadow-color:#fff;}body{height:100%;max-height:100%;overflow:hidden;padding:0;margin:0; border:0;}#content{

}*html#content{top:0; left:2%; height:100%; max-height:100%; width:96%; overflow:auto;position:absolute; z-index:3; border-top:100px solid#fff; border-bottom:80px solid#fff;}#head{position:absolute;margin:0;top:0;left:1px;display:block;width:100%;height:90px;background:orange;background-position:0 0; background-repeat:no-repeat;font-size:4em;z-index:5;overflow:hidden;color:#fff;border-bottom:1px#c0c0c0 solid;text-align:center;}

#content p,h2{padding:10px;font-size:12px;color:#fff;}#content p.bold{font-size:1.2em; font-weight:bold;color:red;}#logo{height:75px;line-height:75px;text-align:center;display:block;}</style></head><body><div id="head">100%高度全屏自适应布局</div><div id="content"><h2>此布局惟一的遗憾是在IE6以下浏览器中显示为怪异模式,因为HTML代码的头一句加了一个注释,如果删除后在IE中滚动条高度显示不全.</h2>此布局在以下浏览器中测试通过: IE5.5,IE6,IE7,TT,Opera 9.63,Firefox3.0,谷歌，IE8未作测试。</div></body></html>

四、scroll、touchmove性能优化技巧

1、一般我们在监听scroll事件的时候想到的优化都是节流：即一段时间内只执行一次响应逻辑；但是有时候这种优化手段不满足我们的业务需求。比如我们需要实时的知道位置信息，并且做出响应，如果使用节流的话，响应效果就是一卡一卡的效果。

2、最近看了一篇文章图解浏览器的基本工作原理；在渲染流水线过程的合成这个阶段，文中提到了快速滚动区域与非快速滚动区域的区别。当我们监听滚动事件的时候，本来图层对于滚动事件只要合成线程合成新的一帧就行了，现在却要等主线程处理完我们的定义的事件之后才能继续做它的工作。这里的每一帧时间就相当于合成线程与主线程两个线程的工作时间了，增加了输出新帧的时间。

3、那么有没有优化方法呢？文中提到了使用 passive改善的滚屏性能；顺藤摸瓜，我找到了谷歌测试的一篇文章，尤其是移动端在监听scroll, touchmove的时候利用 passive：true进行性能优化效果显著;前提是你定义的响应事件不要阻止默认事件,即 e.preventDefault()；原理就是合成线程不用再等待主线程的事件处理完了再合成，主线程、合成线程互不干扰，同步进行。那么我前段时间在优化虚拟滚动的时候需要实时拿到e.scrollTop做一些事情，之前发现用手拖动滚动条快速滚动的时候，通过浏览器的调试工具performance录制发现会有长任务的出现阻塞主线程，当时没有很好的解决办法。现在刚好了解这个情况，给它加上这个设置

4、然后发现在快速拖动滚动条的时候的体验确实有所改善。

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！

声明：信息资讯网所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，版权归原作者东方体育日报所有。若您的权利被侵害，请联系删除。

本文链接：http://www.gdxhedu.com/news/168650.html

谷歌浏览器的scrolltop 谷歌浏览器的使用方法

一、jsp里怎么让div固定在浏览器某个位置不动

二、Scrollamount和scrolldelay分别表示什么意思

三、多个div横行排列,并随着浏览器窗口的大小拉伸,是如何实现的

四、scroll、touchmove性能优化技巧

相关推荐