DIV中滚动条设置到随机位置(CSS+Javascript)

Selenium滚动条控制:JavaScript原理与Python实战指南 在Web自动化测试和爬虫开发中,页面滚动是处理动态加载内容的核心技术。其原理基于浏览器视口模型,通过JavaScript API控制文档滚动位置。这项技术对于确保脚本稳定性和数据完整性至关重要,广泛应用于电商数据抓取、长表单测试和社交媒体信息流处理等场景。本文深入解析了Selenium中通过execute_script执行JavaScript实现滚动的方法,并提供了渐进式滚动、元素定位滚动等实战方案,帮助开发者应对无限滚动、懒加载等现代网页特性。 阅读详情

刚才一个朋友告诉我他的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;">
<li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li>
<li>09</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li>
<li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li>
<li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li>
<li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li>
<li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li>
</div>
<script>
var obj = document.getElementById("cc");
obj.scrollTop
=obj.scrollHeight*(Math.random());
</script>

 

从零到一:手把手教你用DJI E-Port套件为M350 RTK开发第三方负载(PSDK V3实战) 本文详细介绍了如何使用DJI E-Port套件为M350 RTK开发第三方负载,涵盖硬件配置、开发环境搭建及实战应用。通过PSDK V3开发套件,开发者可以高效实现负载与无人机的通信,适用于电力巡检等工业场景,提升开发效率与系统稳定性。 阅读详情

相关推荐

uniapp原生安卓插件开发之路

声明: 我的功能需求:全局悬浮框,也就是在其他应用上依旧能悬浮。查遍uni文档,无法实现,甚至native.js也无法实现,无奈只能走上原生插件开发这条不归路了。(吐槽:天天写前端js,突然写了下android简直要炸,public static String啥的,var不香嘛,不过别人严谨肯定还是有别人道理的,加油吧,争取能入个门!) 本人不懂安卓开发,完全安卓小白,所以安卓方面可能表达的不是很好,安卓代码可能写的不优美,但我功能最终还是实现了。但是为了需求,能力总能被“逼”出来。有描述错误的还望指正

Jone's Area 1万+

css--控制滚动条的显示位置

各种学习后的知识点整理归纳,非原创!

奇怪的人类 3545

ExcelVBA批量添加PDF文件

如图1所示,"BOM-01.xlsx"工作簿中的Sheet1工作表根据B列图号单元格中的内容,在图2所示的文件夹中找到对应的PDF文件,然后嵌入到相应的N列,双击N列中所示的图标,会打开PDF文件,是源文件的副本,即删除源文件,也可以打开N列的文件。 图1 根据B列的图号在N列嵌入对应的PDF文件 图2 PDF文件 图3 文件格式 Sub 导入文件() Ap...

qq389445046的博客 5577

CSS设置滚动条位置调整

1、滚动条位置在左侧。2、滚动条位置在上方。

jiangzhihao0515的博客 3072

从零开始:用LabVIEW和ModbusTCP协议,像搭积木一样连接Delta PLC

本文详细介绍了如何利用LabVIEW的图形化编程环境和ModbusTCP工业协议,快速连接Delta PLC实现数据通信。通过模块化配置和实战案例,指导读者无需编写复杂代码即可完成寄存器读取、多数据类型处理及系统监控,显著提升工业自动化项目的开发效率与部署速度。

n8m7b6v5c4的博客 697

工程创新训练大赛智能网联车辆赛道LKA+自动驾驶9000+分数分案例

/获取主车在主车路径上的ST坐标。if (status == AVPStatus::eForwarding) // approaching the parking space接近阶段。if (status == AVPStatus::eForwarding) // approaching the parking space接近阶段。if (status == AVPStatus::eForwarding) // approaching the parking space接近阶段。

handsomeboyou的博客 1133

css怎么设置div滚动条

经过以上对滚动条的设置,我们可以根据实际需求选择相应的样式进行设置,这样可以更好地体验到网页及移动端应用的交互体验。同时需要注意的是,以上示例主要适用于 Chrome 和 Safari 等一些 Webkit 内核的浏览器,如果要适配其他浏览器,需要使用不同的样式和属性。随着网页及移动端应用的发展,滚动条成为了一种不可或缺的用户体验,而 CSS3 提供的一系列滚动条样式设置使得我们可以更加灵活地定制滚动条的样式,今天我们就来一起探讨一下如何利用CSS来设置div滚动条。

coldriversnow的专栏 5786

WPS JS宏实战:批量调整200个Word表格格式的避坑指南(附完整代码)

本文提供了一份详尽的WPS JS宏实战指南,针对批量调整大量Word表格格式的需求。文章深入解析了如何利用JS宏自动化设置字体、行距和边框,并重点解决了常见的“首行访问报错”等核心难题,附有可直接使用的完整代码,帮助用户显著提升文档处理效率。

weixin_29280219的博客 430

CSS设置滚动条滚动到一定的位置,相对应的元素就不动了(粘滞定位)

CSS设置滚动条滚动到一定的位置,相对应的元素就不动了(粘滞定位)

weixin_52984349的博客 6505

YOLOv13改进策略【YOLO和Mamba】| 替换骨干 Mamba-YOLOv13-T !!! 最新的发文热点

模块是模型中的一个重要组成部分,其主要作用是在模型的初始阶段对输入图像进行处理,方便后续的特征提取和目标检测。以下是对。

Limiiiing的博客 354

Spring AI从入门到精通:构建智能Spring应用的全面指南

随着人工智能技术的快速发展,将大语言模型(LLM)与企业应用集成已成为趋势。Spring AI作为Spring官方推出的AI集成框架,为开发者提供了便捷、标准化的方式来构建智能应用。本文将从基础概念到高级应用,全面介绍Spring AI的核心功能与实践技巧。Spring AI 是 VMware 于 2023 年推出的开源框架,旨在简化大语言模型(LLM)与 Spring 应用的集成。它提供了统一的 API 抽象,支持多种 LLM 供应商,包括 OpenAI、Azure OpenAI、Hugging Face

qq_36929638的博客 1069

纯CSS设置滚动条位置调整在左侧或者在上方

滚动条位置调整在左侧或者在上方 滚动条位置在左侧 // 实现原理 // 设置父元素的文字方向为从右到左 direction: rtl; // 让所有子元素的文字方向从左到右 direction: ltr; // css #son { direction: ltr; } #father { width: 400px; height: 200px; border: 1px solid aqua; overflow-y: scroll; directio

weixin_44670249的博客 1万+

python利用IQR方法与3σ方法进行异常值处理(含代码)

python利用IQR方法进行异常值处理

weixin_46713695的博客 2031

html css 水平滚动条,html/css/js-横向滚动条的实现

在前端UI设计时,网页的制作很麻烦,深有感悟!碰到太多的不懂,或是第一次见,就要去网上找资料!横向滚动条就是我遇到麻烦中其中的一个,其实也 很简单,只是在几次项目中都用到了这个横向滚动条所以就拿出来说一下。需求界面---如下图: 就是一个div里面放很多button,超出div宽度,下方出现横向滚动条。实际情况中,肯定不止几个button,它是可以动态的添加进去,所以父div的宽度肯定不够...

weixin_29826413的博客 2634

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

html5固定div位置,jQuery超强div固定位置布局特效插件

这是一款超级强大的jQuery div固定位置布局特效插件。开发者要制作一个真正动态位置固定的div页面布局是一件十分不容易的事情。如果只使用CSS来制作又不够灵活,所以只有使用javascript来动态的计算出div的位置。注意:该div固定位置插件已经在Chrome, Firefox, Safari,IE10的桌面和移动设备浏览器测试通过。HTML结构要使用这个div固定位置插件,需要在htm...

weixin_39609953的博客 412

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

js实现页面飘窗,div图片飘动

HTML结构 body: <div class="float-container" id="ad1" style="position: absolute; left: 379px; top: 108px;"> <a href="#" title="" target="_blank"> <img src="images/pc1.png" alt=""> </a> <p class="ad1-close">关闭</p> </div

北斗星的爱886的博客 3737

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

css 侧栏跟随_如何实现博客的侧栏跟随(滚动条)效果

现在许多web2.0风格的网站都喜欢用“侧栏跟随”的效果,就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多、内容较长的网站。这种特效对提高网站浏览量、文章点击率、广告点击量都有一定效果。效果演示具体实例,请参见网络文摘栏目随机文章,未来主博客不一定会用。代码如下:CSS部分:/*侧栏跟随*/#box{float:left;position:relative;width:...

weixin_33249310的博客 1014

div固定在浏览器顶部_Jquery DIV滚动至浏览器顶部位置固定

获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative。方法一:$(function() {var elm = $('.nav');var startPos = $(elm).offset().top;$.event.add(window, "scroll", function() {var p =...

weixin_39715513的博客 1295

html文本滚动到底后自动回到顶部,JS 实现DIV 滚动至顶部后固定

JS 实现DIV 滚动至顶部后固定DIV滚动至顶部后固定Test Divfunction menuFixed(id) {var obj = document.getElementById(id);var _getHeight = obj.offsetTop;window.onscroll = function () {changePos(id, _getHeight);}}function cha...

weixin_39622988的博客 570

div静态页面的分页显示

div静态页面的分页显示div静态页面的分页显示: div静态页面的分页显示 #frameContent{     width:500px;                                      /*调整显示区的宽*/     height:200px;                               

老张的专栏 2407

html页面悬浮提示框,js实现页面悬浮框

当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示..div1 {height:2000px;}.div2 {width:%;height:35px;background-color:#3399FF;margin-top:100px;}.div2_1{position:fixed;wi...

weixin_29248611的博客 4849
上一篇: 获取第n行数据
下一篇: 一个简单但常用的表格样式--鼠标划过行变色--简洁实现
fisea
博客等级 码龄19年 40粉丝 197原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值