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

自定义滚动条

目录

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

代码实例

* {
	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实现自定义滚动条的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript限定范围拖拽及自定义滚动条应用（3）

    JavaScript限定范围拖拽及自定义滚动条应用（3）

    两个对象:div1 和 div2,其中div1是div2的父元素,div2只能在div1的范围内拖拽 图中,红点是鼠标的位置,两个绿色箭头相减的结果就是disX,最后oEvent.clientX - disX 就是绿色箭头的部分,这个长度就是判断是否"出格"的依据,也就是这个短的绿色箭头范围应该在0 ~ div2.offsetWidth - div1.offsetWidth之间! <!DOCTYPE html> <html> <head> <m

  • 原生js封装自定义滚动条

    原生js封装自定义滚动条

    最近有一个关于制作在线音乐播放器的项目,需要使用一个滚动条,但是自带滚动条实在是太丑了,所以就自己琢磨了一下自定义的滚动条. 在网上看原理,说实话没怎么看懂,就趁今天上午上安卓的时候,研究了一下,结果还算是满意吧.然后就包装一个对象. 使用方法很简单,就是自定义一个div,将这个对象导入做参数,new一下就可以.也可以自己定义滚动条的样式,只要自己修改一下样式表就可以 效果图: 代码如下: <!doctype html> <html> <head> <meta c

  • JS自定义滚动条效果简单实现代码

    本文实例为大家分享了JS自定义滚动条效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> <style type="text/css"> #div1 { width: 20px; height: 400px; position: relative;

  • JS自定义滚动条效果

    本文实例为大家分享了JS自定义滚动条的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #all{ width: 500px; height: 50px; background-color: sandybrown; border-radius: 25px; margin: 0 aut

  • JS实现的页面自定义滚动条效果

    JS实现的页面自定义滚动条效果

    本文实例讲述了JS实现的页面自定义滚动条效果.分享给大家供大家参考,具体如下: 这里演示网页上用的滚动条效果,是一个自定义的滚动条代码,除了上下两个箭头以外,滚动条和一般的浏览器基本差不多,鼠标滚轮滚动,滚动条滚动.html结构很简单,mainBox是外层div,content是内容,滚动条div是js动态生成的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/ 具体代码如下: <!D

  • JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css只能是改变IE浏览器的颜色,而且CSS不能做到改变火狐浏览器的样式和颜色.所以只能是通过JavaScript来实现了.也有插件可以做到.我分享一下我自己使用原生JavaScript实现的思路.先上个图看下效果: JavaScript实现的思路就是模拟浏览器自身滚动条.我制作的思路是先将整个文档放在一

  • javascript自定义滚动条实现代码

    javascript自定义滚动条实现代码

    在工作中经常会遇到内容会超出固定的一个范围,超出的内容一般会使用到滚动条来滚动显示. 但是用浏览器默认的滚动条经常被产品经理鄙视,可是用css却改变不了滚动条的样式,还好,有万能的js ^_^~~ 网上有各种各样的插件,但最顺手的还是自己写的,还可以一边撸一边当学习,自己动手丰衣足食 (*^__^*) 其中这三个问题深深地困扰我: 1.滚动条高度 2.每次点击向上.向下按钮的时候滚动条应该移动多少距离 3.每拖动1px滚动条,页面需要移动多少? 整个的框架大概是长这样的: 先来看看第一个问题.

  • JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circle"> <a href=""><img src="img/6p.jpg" alt="" /></a> ` <ul class="circle" > <li on

  • 基于JavaScript实现自定义滚动条

    基于JavaScript实现自定义滚动条

    可直接使用的js滚动条,先看看效果图: 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> </head> <meta http-equiv="Content-Type" content="text/html; chars

  • 原生JS实现自定义滚动条效果

    本文实例为大家分享了JS实现自定义滚动条的具体代码,供大家参考,具体内容如下 实现思路: 1.外层设置一个div,在外层的div里面设置一个特别高的div(高度为外层5个div的高度),在高的div里面设置5个div,每个div的高度,都和父级的高度相同 2.在外层div的右侧边框以里自定义一个滚动条,(本人用div设置样式作为滚动条) 3.最外层的div添加onmousewheel事件,使用e.wheelDelta来获取每次滑动的距离,若为正数则向上滑动,将每次增加的数,赋给滚动条的top值,

  • js滚轮事件 自定义滚动条的实现

    js滚轮事件 自定义滚动条的实现

    本文实例为大家分享了js自定义滚动条的实现的具体代码,供大家参考,具体内容如下 描述: 自定义滚动条的实现 效果: 实现: <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding: 0;} html,body { width: 1

随机推荐