js实现自定义滚动条的示例


Posted in Javascript onOctober 27, 2020

自定义滚动条

目录

  • 代码实例
  • 代码解析
  • 下载源码链接

代码实例

* {
	padding: 0;
	margin: 0;
}
#box1 {
	width: 500px;
	height: 20px;
	background: #999;
	position: relative;
	margin: 20px auto;
}
#box2 {
	width: 20px;
	height: 20px;
	background: green;
	position: absolute;
}
#box3 {
	width: 0;
	height: 0;
	margin: 20px auto;
}
#box3 img {
	width: 100%;
	height: 100%;
}

<div id="box1">
<div id="box2"></div>
</div>
<div id="box3">
	<img src="./1.jpg">
</div>

// 获取dom元素
var oBox1 = document.getElementById('box1');
var oBox2 = document.getElementById('box2');
var oBox3 = document.getElementById('box3');

// 按下滚动条后的操作
oBox2.onmousedown = function(e) {
// 获取事件的必备操作,保证事件被获取
var oEvent = e || event

// 保证只有被按下滚动条后才能执行此函数
document.onmousemove = function(e) {
	var oEvent = e || event
	var l = oEvent.clientX - oBox1.offsetLeft
	// 获取滚动条可活动的宽度范围
	var wid = oBox1.offsetWidth - oBox2.offsetWidth
	if (l < 0) {
		l = 0
	} else if (l > wid) {
		l = wid
	}
	// 位置定位
	oBox2.style.left = l + 'px'

	// 根据滚动条位置获得比例
	var scale = l / wid
	// 图片的宽度和高度
	var w = 3264 * scale
	var h = 4080 * scale
	// oBox3.style.cssText是加在内嵌style中的
	oBox3.style.cssText += 'width:' + w + 'px;height:' + h + 'px;'
}

// 保证鼠标松开后事件不再执行
document.onmouseup = function() {
	document.onmousemove = null
	document.onmousedown = null
}
}

代码解析

elem.style.cssText是加在内嵌style中的

// oBox3.style.cssText是加在内嵌style中的
oBox3.style.cssText += 'width:' + w + 'px;height:' + h + 'px;

下载源码链接

星辉的Github

以上就是js实现自定义滚动条的示例的详细内容,更多关于js实现自定义滚动条的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
JavaScript函数基础详解
Feb 03 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
vue实现简单的日历效果
Sep 24 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 #Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 #Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 #Javascript
js实现简易拖拽的示例
Oct 26 #Javascript
js实现限定范围拖拽的示例
Oct 26 #Javascript
js实现磁性吸附的示例
Oct 26 #Javascript
如何构建一个Vue插件并生成npm包
Oct 26 #Javascript
You might like
PHP 翻页 实例代码
2009/08/07 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Python中set与frozenset方法和区别详解
2016/05/23 Python
django ajax json的实例代码
2018/05/29 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Django通过json格式收集主机信息
2020/05/29 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
高级护理专业大学生求职信
2013/10/24 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
2014年宣传工作总结
2014/11/18 职场文书
政府会议通知范文
2015/04/15 职场文书
民主生活会意见
2015/06/05 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书