JS - 兼容到ie7的自定义样式的滚动条封装
demo：
html：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="author" content="guojufeng">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>兼容到ie7的自定义滚动条</title>
<link rel="stylesheet" href="scrollStyle.css">
</head> <body>
<div class="box" id="scrollBox">
<!-- 滚动条 -->
<div class="scrollBar-area" id="scrollBarBox">
<div class="scrollBar-bar" id="scrollBar"></div>
</div>
<ul class="scrollCont" id="scrollCont">
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
<li>
<span>滚动效果第一项</span>
</li>
</ul>
</div>
<script src='http://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
<script src="scrolldown.js"></script>
</body> </html>
css：
html.body,li,ul{
margin:;
padding:;
list-style: none;
}
body{
padding-top: 45px;
padding-left: 50px;
}
.box{
position: relative;
padding: 0px 11px;
background: #dbe0ff;
width: 300px;
height: 180px;
overflow: hidden;
}
.scrollBar-area{
position: absolute;
/* 注意下边这种写法 */
top:;
bottom:;
/* top+bottom均为0，如果父元素height不为auto，就相当于height：100%的设置 */
/* 但是这种写法再ie5中用js得不到高度，jq的height()方法和js的clientHeight都得不到 */
right:;
width: 11px;
border-radius: 10px;
height: 100%;
}
.scrollBar-bar{
margin: 0 3px;
border-radius: 10px;
background: #b8c2ff;
cursor: pointer;
/* 关键代码,提前定位好改变top值进行滚动 */
position: absolute;
top:;
right:;
z-index:;
left:;
}
.scrollCont{
padding: 10px 0;
/* 关键代码,提前定位好改变top值进行滚动 */
position: absolute;
top:;
/* 注意下面这种写法 */
right:;
left:;
/* left+right均为0，如果父元素width不为0，就相当于块元素的width：100%的设置 */
}
li{
margin: 5px 0;
padding: 5px 10px;
cursor: pointer;
}
li:hover{
background: #a3b0ff;
}
js：
var firefox = navigator.userAgent.indexOf('Firefox') != -1;//监测火狐浏览器下使用兼容写法
// 下拉滚动条
//竖向的滚动条，四个参数，可视区域ID，内容区域Id，滚动条区域，滚动条，
function ScrollTop(params){
var $container = $(params.scrollBox),//可视区域
$contanr = $(params.scrollCont),//内容区域
$conScroll = $(params.scrollBarBox),//滚动条活动区域
$sroll = $(params.scrollBar),//滚动条
startY = 0,//开始位置
lastY = 0,//结束位置
YN = false,//判断鼠标按下
bBtn = true;//判断滚动条上滚还是下滚
var $containerH = $container.height();
var $contanrH = $contanr.outerHeight();
// console.log($container.height())
// console.log($conScroll.height())
// console.log($contanr.outerHeight())
// console.log($container.height()*$conScroll.height()/$contanr.outerHeight())
function MouseScr(ev){
var $containerH1 = $container.height();
var $contanrH1 = $contanr.outerHeight();
if($containerH1 >= $contanrH1){
return false
}else{
var ev = ev || window.event,
TopY = 0;
if(ev.detail){
bBtn = ev.detail>0 ? true : false;
}
else{
bBtn = ev.wheelDelta<0 ? true : false;
}
if(bBtn){ //下
TopY = $contanr.position().top-10;
}
else{ //上
TopY = $contanr.position().top+10;
}
var maxTop = $contanr.outerHeight()-$container.outerHeight();
TopY = TopY > 0 ? 0 : TopY;
TopY = TopY < -maxTop ? -maxTop : TopY;
// console.log($conScroll.outerHeight());
$contanr.css({'top':TopY+'px'});
$sroll.css({'top':$sroll.height()*Math.abs(TopY)/$conScroll.height()+'px'});
if(ev.preventDefault){
ev.preventDefault();
}
else{
return false;
}
}
}
if( $containerH >= $contanrH){
// console.log('remove scroll')
$sroll.css('height',$containerH);
// 禁止鼠标事件
function MouseWheel(e) {
// console.log('we')
$contanr.css('top',0);
$sroll.css('top',0);
e = e || window.event;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
return false;
};
if(firefox){
$contanr[0].removeEventListener('DOMMouseScroll',MouseScr,false);//兼容火狐。。。。。。。
$conScroll[0].removeEventListener('DOMMouseScroll',MouseScr,false);
}
// console.log($contanr)
// console.log($contanr[0])
$contanr[0].onmousewheel = MouseWheel;
$conScroll[0].onmousewheel = MouseWheel;
}else{
// 滚动条的高度等于可视区域高度*滚动区域高度/内容高度。
$sroll.css({'height':$container.height()*$conScroll.height()/$contanr.outerHeight()+'px'});
$sroll.mousedown(function(e){
startY = e.clientY - this.offsetTop;
this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象
YN = true;
return false;
});
$sroll.mousemove(function(e){
var maxVal = $conScroll.height() - $(this).height();
if(YN){
lastY = e.clientY - startY;
lastY = lastY < 0 ? 0 :lastY;
lastY = lastY > maxVal ? maxVal : lastY;
$(this).css({'top':lastY+'px'});
$contanr.css({'top':-$conScroll.height()*lastY/$(this).height()+'px'});
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动文本
e.stopPropagation();
}
return false;
});
$sroll.mouseup(function(e){
YN = false;
NumY = lastY;
return false;
});
//为内容区域添加滑轮滚动事件
if($contanr[0].addEventListener){
$contanr[0].addEventListener('DOMMouseScroll',MouseScr,false);//兼容火狐。。。。。。。对，不是ie是火狐。
$conScroll[0].addEventListener('DOMMouseScroll',MouseScr,false);
}
$contanr[0].onmousewheel = MouseScr;
$conScroll[0].onmousewheel = MouseScr;
}
}
(function(){
var params = {
scrollBox : '#scrollBox',
scrollCont : '#scrollCont',
scrollBarBox : '#scrollBarBox',
scrollBar : '#scrollBar'
}
/*注意： .height()方法不计算padding在内 */
if($(scrollCont).height()>$(scrollBox).height()){
$(scrollBar).css('visibility','visible');
ScrollTop(params);
}else{
$(scrollBar).css('visibility','hidden');
}
})();
JS - 兼容到ie7的自定义样式的滚动条封装的更多相关文章
- js alert(“”）弹框 自定义样式
首先用css渲染一个样式 #msg{ height: 2rem; text-align: center; position: fixed; top: 50%; margin-top: -1rem; l ...
- js兼容方法：获取当前样式|计算后样式 getStyle
function getStyle(obj,attr){ if(obj.currentStyle){ //for IE return obj.currentStyle[attr]; }else{ re ...
- div错位/解决IE6、IE7、IE8样式不兼容问题
IE6里DIV错位的问题 原文:chinafine 采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离 ...
- div错位解决IE6、IE7、IE8样式不兼容问题
IE6里DIV错位的问题 采用”FLOAT:LEFT“的DIV在IE8.IE7.都没问题,IE6下却向下移动,出现空白.这是因为,IE6采用的内核默认把DIV之间的距离增加了3~5个PX, ...
- 解决IE5、IE6、IE7与W3C标准的冲突,使用(IE7.js IE8.js)兼容
如果分别用IE5.IE6.IE7浏览同一个网页,将可能出现不一样的效果. 这是它们之间对CSS的解析选择器不一样或错误和个别bug所导致.为了解决这些错误和bug. 我们不得不找到一个能平衡于它们之间 ...
- js+css实现点击回到顶部的效果（最低兼容至ie7）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- css js 兼容问题
js 兼容问题 1. document.form.item 问题问题:代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下运 ...
- 拖放排序插件Sortable.js 兼容好及功能全个人觉得比dragula.js 好的多
经测试,Sortable.js 兼容好和使用方便都是比较不错的,特别手机端使用很棒 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https: ...
随机推荐
- CI框架 -- 核心文件 之 Exceptions.php
使用CI框架,我们通常使用一下三个函数处理错误: show_error('消息' [, int $status_code = 500 ] ) show_404('页面' [, 'log_error'] ...
- Java常用类（二）String类详解
前言 在我们开发中经常会用到很多的常用的工具类,这里做一个总结.他们有很多的方法都是我们经常要用到的.所以我们一定要把它好好的掌握起来! 一.String简介 1.1.String(字符串常量)概述 ...
- 阴影锥(shadow volume)原理与展望
转记:找了不少关于shadow volume原理的资料,还是这个帖子讲解的一目了然,转帖在这里,方便查阅.引用链接:http://blog.donews.com/yyh/archive/2005/05 ...
- 搭建交叉调试环境 arm-linux-gdb配合gdbserver
在嵌入式开发中,有时候需要进行源码级别的调试,可以设置断点,单步执行,相比于每步打印printf或者printk来说,更加友好.下面就来介绍这种调试方法. gdb交叉调试类似于网络浏览 ...
- 在swift中使用线程休眠
C#和php都有sleep让线程休眠指定时间后再继续执行后面的代码,swift中应该如何呢?首先,找一下objective-c版本是怎么做的 [self performSelector:@select ...
- Python打包-Pyinstaller
我们知道,Python很优雅,很值得学习.但是Python是解释性语言,代码需要有Python解释器才能执行,相比较我们平时直接运行exe等可执行文件多了一步的麻烦. 于是,希望能将Python程序打 ...
- 使用d3.v3插件绘制出svg图
众所周知,这个插件使用的svg技术,而IE8(包括IE8)之前的浏览器是不支持svg的 接下来看代码吧 从后台获取到带id和父id的目录数据[json格式] var module = requestU ...
- Office2007打开文件提示“您尝试打开的文件xxx.xls的格式与文件扩展名指定的格式不一致”的解决办法
添加如下注册表 Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Microsoft\Office\12.0\Excel ...
- Layui：设置select下拉框自动选中某项
1.问题:layUI,在做编辑功能有下拉框数据时,需要初始化选中某个值,layUI官网没有相关api,可能我比较笨没找到 2.解决思路:出发点击事件 3.分析dom树结构,出发dl点击事件 方法: v ...
- 对象克隆技术Object.clone()
Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象. 所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象. ...