javascript之模拟滚动条
2024-05-07 08:44:22
demo代码如下：
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 500px;border: 1px solid red;margin: 50px auto;overflow: hidden;position: relative;}.scroll {width: 20px;height: 530px;background-color: #ccc;position: absolute;top: 0;right: 0;}.bar {width: 20px;background-color: red;border-radius: 10px;cursor: pointer;position: absolute;top: 0;}.content {padding: 15px;}</style><script src="animate.js"></script><script>window.onload = function () {//需求：模拟滚动条，鼠标拖动滚动条，滚动条动，而且内容等比例联动。//步骤：//1.根据内容和盒子的比例确定bar的高。//2.绑定事件（鼠标按下，然后移动）//3.鼠标移动，bar联动//4.内容等比例联动//0.获取相关元素var box = document.getElementById("box");var content = box.children[0];var scroll = box.children[1];var bar = scroll.children[0];//1.根据内容和盒子的比例确定bar的高。//内容的高/盒子的高 = scroll的高/bar的高//bar的高 = 盒子的高*scroll的高/内容的高var barHeight = box.offsetHeight*scroll.offsetHeight/content.offsetHeight;bar.style.height = barHeight + "px";//2.绑定事件（鼠标按下，然后移动）bar.onmousedown = function (event) {event = event || window.event;var pageyy = event.pageY || scroll().top + event.clientY;var y = pageyy - bar.offsetTop;//模拟拖拽案例document.onmousemove = function (event) {//新五步获取鼠标在页面的位置。event = event || window.event;var pagey = event.pageY || scroll().top + event.clientY;//鼠标的位置-鼠标在盒子中的位置。pagey = pagey - y;//限制y的取值。大于0，小于scroll的高度-bar的高度if(pagey<0){pagey = 0;}if(pagey>scroll.offsetHeight-bar.offsetHeight){pagey = scroll.offsetHeight-bar.offsetHeight;}//3.鼠标移动，bar联动bar.style.top = pagey + "px";//4.内容等比例联动//高级比例： 内容走的距离/bar走的距离 = （内容的高-大盒子的高）/（scroll的高-bar的高）var s = pagey *(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);//s赋值给content。通过marginTop负值移动contentcontent.style.marginTop = -s+"px";//让被选文字清除。window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();}}//事件解绑document.onmouseup = function () {document.onmousemove = null;}}</script></head>
<body><div class="box" id="box"><div class="content">孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>孩儿励志出湘关，学不成名终不还。<br>埋骨何须桑梓地，人生无处不青山。<br>-------------结束------------<br></div><div class="scroll"><div class="bar"></div></div></div>
</body>
</html>javascript之模拟滚动条相关推荐
- javascript 实现模拟滚动条，但不支持鼠标滚轮
模拟滚动条做项目的时候,很多时候会用到,所以就写了一个这么模拟滚动条,但是不支持滚轮事件 <!doctype html> <html lang="en"> ...
- Javascript - 实现Javascript控制ScrollBar(滚动条) - 学习/实践
1.应用场景 主要用于控制srollbar的位置, 实现界面定位效果. 2.学习/操作 在Javascript中有三种方法能够控制滚动条的位置. 方法一:用scroll函数实现 scroll(x,y) ...
- 前端 - JavaScript 练习 - 模拟新人加群逻辑流程
目录 (一)初始版本 (二)改进版本 往期文章 (一)初始版本 <!--* @Date: 2021-09-02 19:41:01* @LastEditTime: 2021-09-02 22:43 ...
- div横向模拟滚动条,带懒加载
之前工作需要,在网上找了一个横向的div模拟滚动条的方法,后来有自己改动了下,在相关js中加了一个懒加载的方法,贴出来大家一起学习下 首先贴出相当于插件的scrolltools.js var inde ...
- JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
- 模拟滚动条.......
从csdn的blog上转过来的 做了些修改 其实写的比较糟糕(我指的是构造) 我用的是以前的一个drag类 在这个基础上在的来完成的Slider 其实这样代码产生些了冗余.......不如单独写个 ...
- 浅谈Javascript事件模拟
事件是用来描述网页中某一特定有趣时刻的,众所周知事件通常是在由用户和浏览器进行 交互时触发,其实不然,通过Javascript可以在任何时间触发特定的事件,并且这些事件与浏览器创建的事件是相同的.这就 ...
- javascript之模拟call以及apply实现
call 使用一个指定的上下文对象和若干个指定的参数值的前提下调用某个函数或方法.如果传入null, 则this指向window 注意两点: 改变方法内部的this指向 执行方法 实现步骤一 将函数设 ...
- javascript特效模拟marquee
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><script type ...
最新文章
- 机器学习小抄，轻松搞定理解机器学习！
- 《神秘的程序员们》漫画47：这些年你读过的书
- SpringBoot_入门-Spring Boot简介
- 点击按钮修改背景颜色及节点操作隔行变色案例
- android jni arm x86,使用houdini（Android模拟器）在基于x86的AVD上运行ARM库
- 不同设备监控图像传输方式分析
- InstallShield 12 制作安装包
- 电力系统matlab实验报告,电力系统分析潮流实验报告
- python snownlp了解_python中snownlp情感分析简易的demo分享
- 标准正态分布表_机器学习
- 【到底什么才是电角度呢？如何使用示波器精准的测量电角度呢？】
- 浏览器显示json格式
- 手机便签怎么对待办分类文件夹加密
- 支付宝福利：银行卡信息查询
- VVC帧内预测（六）MIP
- 射击末世--建造者模式
- 谷歌2017面经题集
- 架构成长之路 | 图解分布式共识算法Paxos议会协议
- CSGO 制作cfg文件及一些常用命令
- OriginPro绘图过程中遇到的问题及解决办法