jQuery实现模拟滚动条效果;
滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果;
滚动条的实现原理其实比较简单,拿垂直滚动条来说:
1),最外层容器需要设置overflow:hidden,里层容器的高度(滚动框)一亘高过最外层容器,就会出现右侧绝对定位的滚动条,并且还要在外层容器上面监听鼠标滚轮事件,根据滚动的速度设置右侧滚动条的top值;
2),给右侧滚动条监听鼠标拖动事件,当拖动滚动条的时候,滚动框内的内容会发生相应的滚动,这里就要求计算出滚动框的滚动距离;
3),滚动距离 = 滑块移动距离 ÷ 窗口高度 x 页面长度;
原理虽然简单,但还需再补充一点,由于鼠标的滚轮事件各个浏览器的兼容性存在问题,
在IE和Chrome下通过event.wheelDelta的返回值可以知道滚轮是向上滚的还是向下滚的
当返回值为正值的时候,说明是向上滚
当返回值是负值的时候,说明是向下滚
但是event.wheelDelta在火狐下并不起作用,在火狐下需要通过event.detail来知道滚轮是向上滚的还是向下滚,火狐下还有一点不同:
当返回值为正值的时候,说明是向下滚
当返回值是负值的时候,说明是向上滚
所以需要想办法做个兼容;此处是用jQuery来实现滚动条效果,所以我们借用jQuery Mousewheel这个插件来做兼容;如果用原生JS来实现的话,就需要做兼容了,兼容代码:
/**鼠标滚动事件**/
function wheel(event) {
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta / 120;
} else if (event.detail) { /* Mozilla. */
delta = -event.detail / 3;
}
if (delta) handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
if (window.addEventListener) {
/** DOMMouseScroll is for mozilla. */
window.addEventListener('DOMMouseScroll', wheel, false);
}
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel; function handle(delta) {
if (delta < 0) {
console.log("鼠标滑轮向下滚动:" + delta + "次!"); //
return;
} else {
console.log("鼠标滑轮向上滚动:" + delta + "次!"); // -1
return;
}
}
直接来看一个demo:http://codepen.io/jonechen/pen/LNrozb;
效果已经基本实现了,不过并不完善;
CSS代码如下:
*{padding:;margin:;font:14px/1.8 "microsoft yahei";-moz-user-select:none;/**禁止选中文字*/}
.box{width:600px;height:600px;position:relative;border:1px solid #d98d9d;margin:0 auto;overflow:hidden;}
.silderBar{width:5px;height:99%;position:absolute;top:0.5%;right:0.5%;background:#bbb;border-radius:5px;overflow:hidden;}
.silderBar span{height:20px;width:100%;top:;left:;position:absolute;display:block;background:#f90}
.content{padding:10px;word-break:break-all;}
p{margin-bottom:10px;text-indent:2em;}
p+img{max-width:100%;margin:10px auto;display:block;}
HTML代码如下:
<div class="box">
<div class="content">
<h1 style="font-size: 20px;text-align: center;padding: 10px 0">马刺主场大胜灰熊2-0 莱纳德13分邓肯3分9篮板</h1>
<p>
网易体育4月20日报道:<br>
圣安东尼奥马刺队在主场扩大优势。米尔斯替补得到16分,莱纳德得到13分,他们带领球队4人得分上双,马刺队在比赛中逐渐发力拉开比分,他们在西部首轮系列赛第二战主场以94-68战胜孟菲斯灰熊队。马刺队把总比分扩大为2-0,双方的第三场将移师孟菲斯进行。
</p>
<img src="http://img3.cache.netease.com/photo/0005/2016-04-20/BL3G2K6J4TM10005.jpg" >
<p>
马刺队的米尔斯得到16分,莱纳德得到13分,阿尔德里奇得到10分、8个篮板和4次盖帽,马丁得到10分,邓肯得到3分、9个篮板和4次助攻。灰熊队的阿伦得到12分和3个篮板,兰多夫得到11分和12个篮板,巴恩斯得到9分和6个篮板。
</p>
<p>
支球队开赛后争夺激烈,场上比分交替增加,马丁两罚一中,首节还有2分55秒时灰熊队以11-13落后。之后的比赛被马刺队掌控,吉诺比利连投带罚得到4分,米尔斯三分中的,他们带领球队打出9-0的小高潮,马刺队以22-11领先11分结束首节。
</p>
<p>
阿伦独得4分,他率队在第二节打出8-2的反击波,灰熊队追至21-27。米尔斯挺身而出还击5分,莱纳德、马丁等人轮流得分,半场前3分40秒时马刺队以41-24领先17分。巴恩斯跳投命中,马丁三分命中,帕克跳投得分,马刺队在半场结束时以49-35领先14分。
</p>
<p>
马刺队的莱纳德上半场得到9分,米尔斯得到8分;灰熊队的阿伦得到8分,兰多夫得到7分和6个篮板。
</p>
<p>
第三节开始后不久阿尔德里奇两次跳投命中,吉诺比利两罚一中,马刺队以63-45领先18分。阿伦连投带罚拿下4分帮助球队追分,米尔斯再中三分,邓肯两罚一中,马刺队在三节结束时以70-53领先。
</p>
<p>
安德森连续罚进四球开启第四节,马刺队领先21分。灰熊队打得很顽强,兰多夫独得4分,法玛尔跳投命中,他们帮助球队缩小差距。马刺队的两位老将这时找到准星,他们为球队确立胜局。韦斯特突破扣篮,马丁投中三分,他们各得4分率队打出8-2的攻击波,第四节还有3分15秒时马刺队以88-63领先25分。大比分差距让比赛提前失去悬念,双方都尽遣替补,马刺队以94-68获胜。
</p>
<p>灰熊队首发阵容:法玛尔、卡特、巴恩斯、兰多夫、安德森</p>
<p>马刺队首发阵容:帕克、格林、莱纳德、阿尔德里奇、邓肯</p>
</div>
<div class="silderBar"><span></span></div>
</div>
JS代码如下:
<script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script>
$(function() {
var Box_Height = $(".box").outerHeight();
var content_Height = $(".content").outerHeight();
var bar_Height = $(".silderBar").outerHeight();
var isMouseDown = false;
var distance = 0; //滚动条初始高度;
var n = Box_Height / content_Height * bar_Height
$(".silderBar span").css("height", n)
$(".silderBar").mousedown(down);
$(window).mousemove(move);
$(window).mouseup(up); function down(event) {
isMouseDown = true;
} function move(event) {
event.preventDefault();
distance = event.pageY - $(".silderBar").offset().top;
if (isMouseDown == true) {
scroll(distance)
}
} function up() {
isMouseDown = false;
}
// 滚轮事件;
$(".box").bind('mousewheel', function(event, delta) {
event.preventDefault()
var dir = delta > 0 ? 'Up' : 'Down',
vel = delta
distance = $(".silderBar span").offset().top - $(".box").offset().top;
vel > 0 ? distance -= 10 : distance += 10
scroll(distance);
}); function scroll(distance) {
if (distance < 0) {
distance = 0
} else if (distance > bar_Height - $(".silderBar span").outerHeight()) {
distance = bar_Height - $(".silderBar span").outerHeight();
}
$(".silderBar span").css("top", distance)
// 滚动距离 = 滑块移动距离 ÷ 窗口高度 x 页面长度
// var roat = distance / (bar_Height - $(".silderBar span").outerHeight())
// var scroll_distance = parseInt(roat * (content_Height - Box_Height))
var scroll_distance = parseInt(distance / Box_Height * content_Height)
$(".content").css("margin-top", -scroll_distance)
}
})
</script>
插件封装版:http://codepen.io/jonechen/pen/pyOYRM
插件代码:
(function($){
$.fn.scrollBar = function(options) {
var defaults = {
foregroundColor: 'red',
backgroundColor: '#d5d5d5',
height: 400,
sliderBoxWidth: 10,
sliderBarHeight: 100,
mousewheel: true,
radius:5
}
var obj = $.extend(defaults, options);
this.each(function(index, el) {
var me = $(this);
var content = me.children().eq(0);
var isMouseDown = false;
var distance = 0;
me.css({
height: obj.height,
position: 'relative'
});
if (me.outerHeight() < content.outerHeight()) {
var slider = "<div class='slider'><span></span></div>";
me.append(slider);
};
if (slider) {
var sliderBox = me.find(".slider"),
sliderBar = sliderBox.find("span");
var BarHeight = me.outerHeight() / content.outerHeight() * obj.sliderBarHeight;
me.css("paddingRight", content.css("paddingLeft"));
sliderBox.css({
position: 'absolute',
top: 2,
right: 2,
width: obj.sliderBoxWidth,
height: obj.height - 4,
background: obj.backgroundColor,
borderRadius:obj.radius,
overflow:'hidden'
});
sliderBar.css({
position: 'absolute',
top: 0,
right: 0,
width: obj.sliderBoxWidth,
background: obj.foregroundColor,
height: BarHeight,
});
sliderBar.on("mousedown", function(event) {
event.preventDefault();
isMouseDown = true;
});
$(window).on('mousemove', function(event) {
event.preventDefault();
distance = event.pageY - me.offset().top
if (isMouseDown == true) {
scroll(distance)
}
});
$(window).on('mouseup', function() {
isMouseDown = false;
});
// 鼠标滚轮事件;
if (obj.mousewheel) {
me.bind("mousewheel", function(event, delta) {
distance = sliderBar.offset().top - me.offset().top;
delta > 0 ? distance -= 10 : distance += 10;
scroll(distance);
})
} function scroll(distance) {
if (distance < 0) {
distance = 0
} else if (distance > sliderBox.outerHeight() - sliderBar.outerHeight()) {
distance = sliderBox.outerHeight() - sliderBar.outerHeight();
}
sliderBar.css("top", distance);
var scale = distance / (sliderBox.outerHeight() - sliderBar.outerHeight())
var scrollDistance = parseInt(scale * (content.outerHeight() - me.outerHeight()));
content.css("marginTop", -scrollDistance)
}
}
});
}
})(jQuery)
调用方法:
$('.box').scrollBar({
height:600,
})
jQuery实现模拟滚动条效果;的更多相关文章
- jQuery效果之封装模拟placeholder效果,让低版本浏览器也支持
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...
- 利用jquery模拟select效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)
由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...
- jquery判断div滚动条到底部
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...
- 用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
- JQuery 实现返回顶部效果
首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...
- 【前端】用jQuery实现瀑布流效果
jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...
- Jquery简单的placeholder效果
Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 ...
- 基于jQuery图像碎片切换效果插件FragmentFly
基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览 源码下载 部分代码: <div class="all_ ...
随机推荐
- C# 常用小技巧
int? id 表示id是可以为null的整型 跟Nullable<int> id 是一样的 id ?? 1等于 id==null?1:id;
- 如何获取tableview中当前选中的cell
当我们点击某个cell时,会执行下面这个方法,方法中调用另一方法执行具体操作: - (void)tableView:(UITableView *)tableView didSelectRowAtInd ...
- ubuntu12.04 下安装matlab2012
1.下载matlab2012a(例如:****.iso) 2.创建挂载目录 sudo mkdir /media/matlab 3.将当前目录切换到镜像文件的目录,然后将镜像文件挂载到刚刚创建的目录下 ...
- JavaScript入门基础
JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...
- 观察者(observer)设计模式
转载:http://www.tracefact.net/CSharp-Programming/Delegates-and-Events-in-CSharp.aspx 假设我们有个高档的热水器,我们给它 ...
- C#中如何将combox中的下拉项和一个枚举中的各项进行绑定
实现一个combobox,将其各个下拉项与枚举进行绑定 效果图如下: 代码详解如下: 枚举: public enum StoreSite { /// <summary> /// 未知 // ...
- Winform主窗体的设置
软件必然涉及到一个主窗体MainForm,下面介绍一下几个简单的属性设置,可能比较有用 (1)icon,当然是咱们软件的图标了,设置上去即可 (2)isMdiContainer,这个比较重要了哦,必须 ...
- PHP isset()与empty()的区别详解
通过对PHP语言的学习,应该知道它是基于函数的一款HTML脚本语言. 庞大的函数库支持着PHP语言功能的实现. 有关PHP函数isset()与empty()的相关用法. PHP的isset()函数 一 ...
- mysql之数据库基本概念(mysql学习笔记一)
数据库系统 数据库管理系统(DBMS)+数据库(DATABASE)(+数据库管理员) DBS=dbms+db 定义: 大量信息进行管理的高效解决方案,按照数据结构来组织.存储和管理数据的仓库 关系 ...
- redis 配置文件解读
# Redis 配置文件 # 当配置中需要配置内存大小时,可以使用 1k, 5GB, 4M 等类似的格式,其转换方式如下(不区分大小写) # # 1k => 1000 bytes # 1kb = ...