DIV滚动条随机位置的设置技巧

2016-02-19 23:34 10 1 收藏

get新技能是需要付出行动的，即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是DIV滚动条随机位置的设置技巧，一起来学习了解下吧！

【 tulaoshi.com - Web开发】

刚才一个朋友告诉我他的blog友情链接太多了，所以把所有链接放到一个DIV中，加了个滚动条，可是他又不想每次别人来看，看到的都是前面几个链接，于是问我有没有什么办法，想了一个，呵呵，正好有个办法

style后面用于限定DIV样式并加滚动条，这个不多说
关键的地方其实很简单，最后两行Javascript就是了，起作用的只有最后一行：
obj.scrollTop=obj.scrollHeight*(Math.random());
obj.scrollTop：滚动条距离顶部的位置
obj.scrollHeight：流动区域的高度
Math.random()：获得一个随机数
很简单，有人可能需要，用就拿去，哈哈

PS：IE6 / IE7 / FF2 测试通过
IE7在本地测试时只是每次打开时滚动条位置才不同，刷新却没有变化，但放到网站上之后就正常了

代码如下：

div id="cc" style="height:250px;width:200px;overflow-y:scroll;overflow-x:hidden;"
li01/lili02/lili03/lili04/lili05/lili06/lili07/lili08/li
li09/lili10/lili11/lili12/lili13/lili14/lili15/lili16/li
li17/lili18/lili19/lili20/lili21/lili22/lili23/lili24/li
li25/lili26/lili27/lili28/lili29/lili30/lili31/lili32/li
li33/lili34/lili35/lili36/lili37/lili38/lili39/lili40/li
li41/lili42/lili43/lili44/lili45/lili46/lili47/lili48/li
/div
script
var obj = document.getElementById("cc");
obj.scrollTop=obj.scrollHeight*(Math.random());
/script

来源:http://www.tulaoshi.com/n/20160219/1630160.html

上一篇：零碎记忆旳的非主流QQ分组_离别与重逢不停上演戏码
下一篇：网页字体大小的设计技巧

看过《DIV滚动条随机位置的设置技巧》的人还看了以下文章更多>>

CSS代码:控制IE滚动条

标签： Web开发

今天遇到了一个纵向滚动条，本来打算用框架做，经过看到别人做的页面中，才知道可以用CSS 控制，以下CSS代码贡献给大伙学习。 overflow-y:scroll 上下滚 overflow-x:scroll 左右滚

js滚动条多种样式,推荐

标签： Web开发

一外国佬写的。有几种样式，点击那些example1234.html就能看见了。可以研究一下下 http://www.n-son.com/scripts/jsScrolling/

CSS隐藏网页的滚动条教程

标签： Web开发

解决思路：我们希望是强制出现滚动条，但有时候我们并不希望出现滚动条，那就要隐藏它了。从上个问题的指点中我们很容易得到答案----设置CSS属性overflow的值为hidden。具体步骤：方法一：设置CSS属性overflow为hidden。＜body＞方法二：设置body元素的scroll属性为no。＜body scroll="no"＞ ...

FAQ：如何访问WebBrowser的滚动条

标签：编程语言网络编程

问======================================== 我使用webbrowser控件，但是想用自己的滚动条，但不知如何得到webbrowser中滚动条的长度，怎么办？谢谢！！ 2004-10-24 答======================================== 抱歉拖了很久才回复你的问题。 &nb...

滚动条CSS样式详细说明

标签： Web开发

SCROLLBAR-FACE-COLOR:#f5f5f5; SCROLLBAR-HIGHLIGHT-COLOR:#f5f5f5; SCROLLBAR-SHADOW-COLOR:#b2b2b2; SCROLLBAR-3DLIGHT-COLOR:#b2b2b2; SCROLLBAR-ARROW-COLOR:#3e3e3e; SCROLLBAR-TRACK-COLOR:#fff; SCROLLBAR-DARKSHADOW-COLOR:#fff; SCROLLBAR-BASE-COLOR:#f5f5f5;

查看更多精彩>>