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 相关文章推荐
JS模板实现方法
Apr 03 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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投票系统防刷票判断流程分析
2012/02/04 PHP
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
python逆向入门教程
2018/01/15 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
python实时监控cpu小工具
2018/06/21 Python
pytorch permute维度转换方法
2018/12/14 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python气泡提示与标签的实现
2020/04/01 Python
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
生态养殖创业计划书
2014/05/06 职场文书
小组组名及励志口号
2015/12/24 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL