如何用js控制移动div的滚动条

最新推荐文章于 2024-05-05 20:17:09 发布
最新推荐文章于 2024-05-05 20:17:09 发布
阅读量3.7k 收藏 3
点赞数
文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45587822/article/details/114108226
版权

API

通过div的scrollTop变动控制bai垂直滚动条位置。
通过zhidiv的scrollLeft变动控制水平dao滚动zhuan条位置。

示例

<body>
//d1是外层div，带滚动条
<div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'>
<div style='height:500px;width:500px;background:yellow'>2222</div>
</div>
</body>
<script>
document.getElementById('d1').scrollTop=100;//通过scrollTop设置滚动到100位置
document.getElementById('d1').scrollLeft=200;//通过scrollTop设置滚动到200位置
</script>
猫兮ぃCatci
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js DIV滚动条随机位置的设置技巧
12-11
style后面用于限定DIV样式并加滚动条，这个不多说 关键的地方其实很简单，最后两行Javascript就是了，起作用的只有最后一行： obj.scrollTop=obj.scrollHeight*(Math.random()); obj.scrollTop：滚动条距离顶部的位置 obj.scrollHeight：流动区域的高度 Math.random()：获得一个随机数 很简单，有人可能需要，用就拿去，哈哈 PS：IE6 / IE7 / FF2 测试通过 IE7在本地测试时只是每次打开时滚动条位置才不同，刷新却没有变化，但放到网站上之后就正常了 代码如下： 010203040506070
div内的scroll局部滚动
热门推荐
听闻青春丶
10-15 2万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{ padding: 0;
js控制div内的滚动条的位置
weixin_34149796的博客
07-24 1442
通过div的scrollTop变动控制垂直滚动条位置。 通过div的scrollLeft变动控制水平滚动条位置。 示例： &lt;body&gt; //d1是外层div，带滚动条 &lt;div id='d1' style='height:200px;width:100px;overflow:auto;background:blue;'&gt; &lt;div style='h...
JS - 处理元素滚动
kelly0721的博客
02-07 378
业务功能中时常有元素滚动的功能，现在就总结一下一些常用的事件。
html滚动条移动到指定位置,jquery操作滚动条滚动到指定位置[附在线实例]
weixin_32818587的博客
06-08 937
jquery操作滚动条滚动到指定位置[附在线实例]文章标签: 滚动条:05-10 23:41:920次:0条4赞点赞简介本文讲的是在jquery里操作滚动条滚动到指定位置的方法及在线实例。在jquery里，我们要操作滚动条滚动到指定的位置，是非常简单的，方法如下：$("html,body").scrollTop($("#aijquery2").offset().top);上面这句代码的意思就是操作...
js控制的DIV一些属性 scrollLeft,scrollWidth,clientWidth,offsetWidth
jazywoo_在路上
12-09 2238
出处   http://blog.vsharing.com/jekkon/A1014627.html scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHe
JS控制DIV滚动条
fyqcdbdx的专栏
11-22 1万+
JS控制DIV滚动条 function scrollup() { document.getElementById('div1').scrollTop = document.getElementById('div1').scrollTop-25; } function scrolldown() { document.getElementById('div1').scrollTo
javaScript js 可滑动的div块
weixin_30266829的博客
07-14 259
可以滑动的div块 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>滑动的div</title> <meta http-equiv="keywords" content="...
div定时动态滚动列表
qq_39520338的博客
12-11 859
示例 每3秒列表向下滚动一行，每行高度为32，触底或触顶后自动反向滚动! 以下为调用方法 autoScroll(32,32,3000,document.getElementById('hyjbqk')); /** * stepLength：一次滚动步长 * speed：滚动速度 * delay：停留时间 * element：Element对象 * * element.offsetHeight 元素的像素高度（包括边框和填充） * el
JS 实现 div 滑动效果，模拟平面滑动，模拟平面滑动效果
u012972294的博客
11-01 1841
JS 实现 div 滑动效果，模拟平面滑动，模拟平面滑动效果 本来想找个现成的代码，找了很久 要不是 轮播页面切换效果，要不就是翻书翻页的效果。。。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional....
JS控制滚动条位置
林中明月间丶
03-09 3650
【代码】JS控制滚动条位置。
基于JavaScript实现div层跟随滚动条滑动
10-22
项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关...
js操作滚动条事件实例
12-10
下边代码，是监听滚动条只要移动，下方的返回顶部的div显示与隐藏的代码 [removed] = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > 0) { $(".cbbfixed")....
div随滚动条上下滚动
08-17
div随滚动条上下滚动,div随滚动条上下滚动div随滚动条上下滚动div随滚动条上下滚动
jQuery-Scrollbars:一个用于将自定义滚动条添加到div的jQuery插件
05-26
jQuery滚动条一个用于将自定义滚动条添加到div的jQuery插件Scrollbars，一个jQuery插件，用于向div中添加自定义滚动条。 版本：0.1 插件URI： : 作者：大卫·波西（David Posey） 作者URI： ： 执照：GPL===========...
react-scroll-sensor:获取组件中窗口对象的滚动位置
05-13
React滚动传感器 ...您可以使用它来建立一个粘性div，该div随光标移动。 import ScrollIndicator from "react-scroll-sensor" ; { ( scrollX , scrollY ) => ( Hello < / p > ) } < / ScrollIn
【Delphi 爬虫库 3】使用封装好的 HTML 解析库对 HTML 数据进行解析
最新发布
记录日常技术经验
05-05 280
HTML是Web页面的构建语言，每个Web开发者都需要了解HTML的基础知识。这时候，我们就需要使用HTML在线解析工具，方便直接地解析和编辑HTML代码。通过使用HTML在线解析工具，我们能够实现快速编辑和预览HTML代码的功能。而且，随着科技发展，HTML在线解析工具被越来越多地应用到各种软件和Web应用程序中，具有越来越广泛的应用前景。成功解析提取出Json，至于对Json怎么解析上一篇文章已经讲过了。HTML源代码非常的长,这里就不贴出了,我们需要对最后的。我们的目标就是利用Html解析库提取出。
HTML 标签通用属性
juan9872的博客
04-29 1195
src属性: <img/> <embed/> <bgsound/> <frame/> <iframe><iframe/><input type="password" value="单行文本框" size="20"><input type="text" value="单行文本框" size="20"><marquee width="180"></marquee>设定宽度。href属性: <base/> <a></a> <link/> 标签。<img src="" width="180"/>设定图片宽度。
html--魔方
stqer的博客
05-05 545
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> :root { --cube-size: 50vmin; --side-size: calc(var(--cube-size) /
html自动滚动显示消息的框,聊天窗口控制div的滚动条自动上移，显示最后一行信息...
06-08
您可以使用CSS的`overflow-y`属性来控制滚动条，以及JavaScript的`scrollTop`属性来控制滚动位置。具体实现可以参考以下代码： HTML代码： ``` <div id="chat-box"> <div class="message">消息1</div> <div class...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值