JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
作者:依然仰望 发布时间:2024-04-16 09:37:25
标签:js,自定义,滚动条
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色。但是css只能是改变IE浏览器的颜色,而且CSS不能做到改变火狐浏览器的样式和颜色。所以只能是通过JavaScript来实现了。也有插件可以做到。我分享一下我自己使用原生JavaScript实现的思路。先上个图看下效果:
JavaScript实现的思路就是模拟浏览器自身滚动条。我制作的思路是先将整个文档放在一个容器里面,然后通过改变容器里面的div的top值来实现滚动效果布局如下:
<style>
*{
margin:0;
padding:0;
}
body{
overflow:hidden;
}
#box{
float:right;
top:0;
right:0;
width:20px;
background:#ccc;
position:relative;
}
#drag{
position: absolute;
top:0
left:0;
width:20px;
background:green;
}
#content{
position:absolute;
left: 0;
}
</style>
<body>
<div id="box">
<div id="drag"></div>
</div>
<div id="content">
<div style="background:#ccc;width: 100px;">
Although many people talk about the super performance of quantum computing, such as one second to complete the current supercomputer computing tasks for several years, but so far did not create a true sense of the quantum computer, one of the very important reason is that, The state of particles used in quantum computation is not stable, and any electromagnetic or physical interference can easily disrupt its work. The state of the Mayola fermion is very stable, which makes it a perfect choice for making quantum computers. Six months ago in the laboratory of Shanghai Jiaotong University, Jia Jinfeng successfully captured it.
Speaking of the scene, Jia Jinfeng said: "In fact, I started to hear the Mayolana fermions, I think this thing may not be done 20 years out.
Using a special material preparation method, Jia Jinfeng's research team has grown topological insulators on the superconductors with thickness of 5 nanometers. The topological superconductor materials are prepared and finally the Mayolana fermions are found at the interface of the topological superconductors. The mysterious particles were captured 80 years, but also let Jia Jinfeng more firm with its confidence in the manufacture of quantum computers.
Speaking of the future of the plan, Jia Jinfeng said: "I hope to within a few years to do the topological quantum bit!" (Before) the world has not, so if we cut into this from the point, we are the same with the world The starting line, for our country, this is able to catch up with the footsteps of quantum computing, a starting point.
<div>
</div>
</body>
先定义滑块和滑动条,然后在定义一个装内容的盒子,布局很简单,body的 overflow设置成hidden隐藏默认滚动条。
实现主要思路就是:滑块移动距离/滑块滚动范围=内容滚动距离/内容可滚动高度;滑块移动距离就是鼠标按下后拖动的距离,
内容可滚动高度就是内容总高度减去可视区域高度。另外,滚动条的总高度就是可视区域的高度,滑块的高度=可视区域的高度/内容的总高度*可视区域的高度。最后就是判断浏览器是否是火狐。
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var oDrag=document.getElementById('drag');
var content=document.getElementById('content');
var viewHeight=document.documentElement.clientHeight;
var conHeight=content.clientHeight
oBox.style.height=viewHeight+'px';
oDrag.style.height=viewHeight/conHeight*viewHeight+'px';
window.onresize = function(){
viewHeight=document.documentElement.clientHeight;
oBox.style.height=viewHeight+'px';
oDrag.style.height=viewHeight/conHeight*viewHeight+'px';
oDrag.style.top=-content.offsetTop/(content.clientHeight-viewHeight)*(oBox.clientHeight-oDrag.clientHeight)+'px';
}
oDrag.onmousedown=function (ev){
//阻止默认事件
var e=ev||window.event;
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};
//e.clientY鼠标当前坐标
var downY=e.clientY-oDrag.offsetTop;
document.onmousemove=function (ev){
var e=ev||window.event;
var top=e.clientY-downY;
if (top<=0) {
top=0;
};
if (top>=oBox.clientHeight-oDrag.clientHeight) {
top=oBox.clientHeight-oDrag.clientHeight;
};
var scale=top/(oBox.clientHeight-oDrag.clientHeight);
var contentY=scale*(content.clientHeight-viewHeight);
oDrag.style.top=top+'px';
content.style.top=-contentY+'px';
}
document.onmouseup=function (){
document.onmousemove=null;
}
}
var str=window.navigator.userAgent.toLowerCase();
//火狐浏览器
if (str.indexOf('firefox')!=-1){
document.addEventListener('DOMMouseScroll',function (e){
e.preventDefault();//阻止窗口默认的滚动事件
if (e.detail<0) {
var scrollHei=content.offsetTop+25;
if (scrollHei>=0) {
scrollHei=0;
};
if (scrollHei<=-(content.clientHeight-viewHeight)) {
scrollHei=-(content.clientHeight-viewHeight);
};
var scale=scrollHei/(content.clientHeight-viewHeight);
var top=scale*(oBox.clientHeight-oDrag.clientHeight);
content.style.top=scrollHei+'px';
oDrag.style.top=-top+'px';
}
if (e.detail>0) {
var scrollHei=content.offsetTop-25;
if (scrollHei>=0) {
scrollHei=0;
};
if (scrollHei<=-(content.clientHeight-viewHeight)) {
scrollHei=-(content.clientHeight-viewHeight);
};
var scale=scrollHei/(content.clientHeight-viewHeight);
var top=scale*(oBox.clientHeight-oDrag.clientHeight);
content.style.top=scrollHei+'px';
oDrag.style.top=-top+'px';
};
},false);
}
else{//非火狐浏览器
document.onmousewheel=function (ev){
var e=ev||window.event;
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};
if (e.wheelDelta>0) {
var scrollHei=content.offsetTop+25;
if (scrollHei>=0) {
scrollHei=0;
};
if (scrollHei<=-(content.clientHeight-viewHeight)) {
scrollHei=-(content.clientHeight-viewHeight);
};
var scale=scrollHei/(content.clientHeight-viewHeight);
var top=scale*(oBox.clientHeight-oDrag.clientHeight);
content.style.top=scrollHei+'px';
oDrag.style.top=-top+'px';
};
if (e.wheelDelta<0) {
var scrollHei=content.offsetTop-25;
if (scrollHei>=0) {
scrollHei=0;
};
if (scrollHei<=-(content.clientHeight-viewHeight)) {
scrollHei=-(content.clientHeight-viewHeight);
};
var scale=scrollHei/(content.clientHeight-viewHeight);
var top=scale*(oBox.clientHeight-oDrag.clientHeight);
content.style.top=scrollHei+'px';
oDrag.style.top=-top+'px';
};
}
}
}
</script>
来源:http://www.cnblogs.com/wswq/p/6251826.html
0
投稿
猜你喜欢
- eval()函数可以将字符串型的list、tuple、dict等等转换为原有的数据类型即使用eval可以实现从元组,列表,字典型的字符串到元
- 写在前面原计划继续写一篇Portia的使用博客,结果在编写代码途中发现,在windows7的DockerToolbox里面使用Portia错
- 文章所罗列的问题虽然看似简单,但是每个背后都涵盖了一个或几个大家容易忽视的基础知识点,希望能够帮助到你的面试和平时工作。Q1第一个问题关于弱
- django自定义管理器和model的继承在我写代码时建立的很多数据库需要一些共同的字段,比如is_active, create_time这
- 为什么使用虚拟环境因为直接在真实环境进行安装python的包会造成环境之间的污染,因此需要创建虚拟环境,原则上每一个项目都需要有一个独属于自
- 本文实例讲述了Django发送html邮件的方法。分享给大家供大家参考。具体如下:在Django中,发送邮件非常的方便,一直没有时间,今天来
- 实战场景 本篇博客学习字体反爬,涉及的站点是实习 x,目标站点地址直接百度搜索即可。可以看到右侧源码中出现了很多&ldqu
- 本文主要介绍了Python3中PyQt5简单实现文件打开及保存,分享给大家,具体如下:# -*- coding: utf-8 -*-# Fo
- 首先还是应该科普下函数参数传递机制,传值和传引用是什么意思?函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进
- 在数据库查询的时候,我们有时有这样的需求,就是要找出数据表里指定范围行内的数据记录,比如说要找出数据表里第10行到第20行的这10条数据,那
- python中判断文件结束符的方法:可以使用try except语句块来进行判断。具体使用方法:【try:while True:s = in
- 在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性,比如:我们有一个网站,
- 下面方法可以用来快速生成一批数据 if(object_id('t') is not null) drop table t g
- 本文实例讲述了Java常用正则表达式验证类。分享给大家供大家参考,具体如下:package com.fsti.icop.util.regex
- 数据库文件在使用过程中,日志文件会越来越大。小则几个G,大的可能几十上百G都有可能,有时实在是没有必要为它浪费太大的硬盘存储空间。所以可以把
- 一、迭代器迭代器就是iter(可迭代对象函数)返回的对象,说人话.......可迭代对象由一个个迭代器组成可以用next()函数获取可迭代对
- 前言:Python 自带了很多的内置函数,极大地方便了我们的开发,下面就来挑几个内置函数,看看底层是怎么实现的。内置函数位于 Python/
- 在Python项目中,我们通常需要使用许多第三方库来提供额外的功能和工具。但是,直接将这些库上传到Git仓库并不是一种好的做法,因为这会使得
- 什么是迭代器迭代是 python 中访问集合元素的一种非常强大的一种方式。迭代器是一个可以记住遍历位置的对象,因此不会像列表那样一次性全部生
- 这篇文章主要介绍了Python 切分数组实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以