js模拟滚动条滚动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
body{
height:2000px;
}
.box1{
width: 320px;
height: 400px;
background: #ccc;
overflow: hidden;
overflow-y: scroll;
margin: 20px 0 0 100px;
}
.con1{
font-size: 18px;
}
#out{
width: 320px;
height: 400px;
background: url(bg1.png) 0 0 repeat-x;
position: absolute;
left: 500px;
top: 20px;
overflow: hidden;
}
#con{
width: 280px;
padding: 5px;
font-size: 18px;
position: absolute;
left: 0px;
top: 0px;
}
#box{
width: 30px;
height: 400px;
position: absolute;
right: 0;
top: 0;
}
#drag{
width: 30px;
height: 53px;
background: url(icon2.png) 0 0 no-repeat;
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box1">
<p class="con1">模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条</p>
</div> <div id="out">
<div id="con">
模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条模拟滚动条
</div>
<div id="box">
<p id="drag"></p>
</div>
</div>
<script>
var out=document.getElementById('out');
var con=document.getElementById('con');
var box=document.getElementById('box');
var drag=document.getElementById('drag');
drag.onmousedown=function (ev){
var e=ev||window.event;
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};
var d_bkt=e.clientY-drag.offsetTop;
document.onmousemove=function (ev){
var e=ev||window.event;
var top=e.clientY-d_bkt;
if (top<=0) {
top=0;
};
if (top>=box.clientHeight-drag.clientHeight) {
top=box.clientHeight-drag.clientHeight;
};
var scale=top/(box.clientHeight-drag.clientHeight);
var cony=scale*(con.clientHeight-out.clientHeight);
drag.style.top=top+'px';
con.style.top=-cony+'px';
console.log(top);
}
document.onmouseup=function (){
document.onmousemove=null;
}
}
var str=window.navigator.userAgent.toLowerCase();
if (str.indexOf('firefox')!=-1) {//火狐浏览器
out.addEventListener('DOMMouseScroll',function (e){
e.preventDefault();//阻止窗口默认的滚动事件
if (e.detail<0) {
var t=con.offsetTop+20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
var scale=t/(con.clientHeight-out.clientHeight);
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
if (e.detail>0) {
var t=con.offsetTop-20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
var scale=t/(con.clientHeight-out.clientHeight);
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
},false);
} else{//非火狐浏览器
out.onmousewheel=function (ev){
var e=ev||window.event;
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};
if (e.wheelDelta>0) {
var t=con.offsetTop+20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
var scale=t/(con.clientHeight-out.clientHeight);
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
if (e.wheelDelta<0) {
var t=con.offsetTop-20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
var scale=t/(con.clientHeight-out.clientHeight);
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
}
};
</script>
</body>
</html>
终极效果图
js模拟滚动条滚动的更多相关文章
- JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)
由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- js禁止滚动条滚动，并且滚动条不消失，页面大小不变
//禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable',fu ...
- js 模拟滚动条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js将滚动条滚动到指定位置的方法
代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- JS模拟下拉框select
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
- js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据
防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...
- js 判断滚动条是否停止滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下, js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 下面看看我的原始代码: & ...
随机推荐
- [转帖]Windows 7寿终正寝 为何Windows 10屡被吐槽它却无比经典？
Windows 7寿终正寝 为何Windows 10屡被吐槽它却无比经典? https://www.cnbeta.com/articles/tech/908897.htm 是的,一代经典操作系统Win ...
- C++Primer 5th Chap2 Variables and basic Types
wchar_t,char16_t,char32_t用于拓展字符集 char和signed char并不一样,由编译器决定类型char表现上述两种中的哪一种 一般long的大小和int无二,如果超过in ...
- scrapy服务化持久运行
如果要将scrapy做成服务持久运行,通常我们会尝试下面的方式,这样是不可行的: class myspider(scrapy.Spider): q = queue() #task qu ...
- javascript匿名函数自执行 (function(window,document,undefined){})(window,document);
使用匿名自执行函数的作用: (function(window,document,undefined){})(window,document); 1.首先匿名函数 (function(){}) (); ...
- 面试6 --- 当List<String> list =new ArrayList<String>(20); 他会扩容多少次
当List<String> list =new ArrayList<String>(20); 他会扩容多少次?A 0 B 1 C 2 D 3答案是A: 因为这个集合 ...
- oracle数据库 部分函数的用法
select * from tab; //获取当前用户的数据库的所有表名 select sys_guid(),UserName from TESTLIKUI; //获取guid select sys_ ...
- C#特性的学习（一）
1.预定定义特性之一:AttributeUsage AttributeUsage有三个属性: 第一个属性:ValidOn 规定特性可被放置的语言元素,默认是AttributeTargets.All.
- wc命令——Linux系统高效数据统计工具
wc(world count)是一个统计文件字词,字节,行数的Linux命令,它可以帮我们非常方便的统计以上信息. 主要参数 常见参数如下: -c 统计字节数. -l 统计行数. -m 统计字符数.这 ...
- Flutter 与 Android 的交互
https://juejin.im/post/5cd91de4518825686b120921 https://juejin.im/entry/5b64292be51d451995676398
- 【转载】C#中List集合使用Remove方法移除指定的对象
在C#的List集合操作中,有时候需要将特定的对象或者元素移除出List集合序列中,此时可使用到List集合的Remove方法,Remove方法的方法签名为bool Remove(T item),it ...