jQuery实现模拟滚动条效果;

滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果;

滚动条的实现原理其实比较简单,拿垂直滚动条来说:

1),最外层容器需要设置overflow:hidden,里层容器的高度(滚动框)一亘高过最外层容器,就会出现右侧绝对定位的滚动条,并且还要在外层容器上面监听鼠标滚轮事件,根据滚动的速度设置右侧滚动条的top值;

2),给右侧滚动条监听鼠标拖动事件,当拖动滚动条的时候,滚动框内的内容会发生相应的滚动,这里就要求计算出滚动框的滚动距离;

3),滚动距离 = 滑块移动距离 ÷ 窗口高度 x 页面长度;

原理虽然简单,但还需再补充一点,由于鼠标的滚轮事件各个浏览器的兼容性存在问题,

在IE和Chrome下通过event.wheelDelta的返回值可以知道滚轮是向上滚的还是向下滚的

当返回值为正值的时候,说明是向上滚

当返回值是负值的时候,说明是向下滚

但是event.wheelDelta在火狐下并不起作用,在火狐下需要通过event.detail来知道滚轮是向上滚的还是向下滚,火狐下还有一点不同:

当返回值为正值的时候,说明是向下滚

当返回值是负值的时候,说明是向上滚

所以需要想办法做个兼容;此处是用jQuery来实现滚动条效果,所以我们借用jQuery Mousewheel这个插件来做兼容;如果用原生JS来实现的话,就需要做兼容了(度娘之);

直接来看一个demo:http://codepen.io/jonechen/pen/LNrozb;

效果已经基本实现了,不过并不完善;

CSS代码如下:

*{padding:0;margin:0;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:0;left:0;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>
时间: 2024-11-07 00:06:35

jQuery实现模拟滚动条效果;的相关文章

js模拟滚动条(不依赖jquery)

转载请注明: TheViper http://www.cnblogs.com/TheViper 当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动

【前端】用jQuery实现瀑布流效果

jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格. 瀑布流的应用: 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不

基于jQuery图像碎片切换效果插件FragmentFly

基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_wrap"> <div class="wrap_head"> <div id="fragment_title"> </div> </div> <div class="wrap_middle&

Jquery简单的placeholder效果

Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 查看效果链接 JS代码如下: /* * JS placeholder * IE6-IE9不支持HTML5中的placeholder */ function Placeholder(options) { this.config = { defaultColor: '#ccc', curColor: '

用jQuery实现瀑布流效果学习笔记

jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把其中的几个函数具体记录一下. 首先,在WebStorm中新建一个工程,导入jquery库和几张img放在img文件夹下,新建html和css文件,用来搭建基本的网页结构.我们设定图片的宽度固定,高度不定,绝对定位,左浮动.这里就不细说了.我们主要讲jquery部分的知识. 这里我们讲一下我们要实现的

基于HTML5 canvas的jQuery刮刮卡效果

ScratchIt是一款基于HTML5 canvas的jQuery刮刮卡效果插件.这个刮刮卡效果使用两张图片和canvas来制作,可以使用鼠标擦除上面的图片,将下面的图片显露出来,模拟现实的刮刮卡效果. 效果演示:http://www.htmleaf.com/Demo/201506071985.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201506071984.html

js模拟placeholder效果1

由于有的浏览器不支持placeholder,所以写了一个jquery插件来模拟placeholder效果. 使用方法:$("#IDName").placeholder(); 话不多说,直接上代码~~~ (function ($) {     $.fn.placeholder = function (options) {         var defaults = {             pColor: "#BEBEBE",             pActiv

wpf 模拟3D效果(和手机浏览图片效果相似)(附源码)

原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依赖属性也不介绍.),个人认为,依赖属性这个东西,有百分之五十是为了3D而存在.(自己写的类似于demo的东西)先上图,无图无真相这是demo的整个效果图,可以用鼠标移动,触摸屏也可以手指滑动,图片会移动,然后移动结束,会有一个回弹的判断. <Window x:Class="_3Dshow.Wi

如何使用jQuery实现隔行变色效果

如何使用jQuery实现隔行变色效果:隔行变色效果在网站有大量应用,尤其是在类似新闻列表这样的功能,对于行与行之间的区分有很大的好处,也提高了网站的人性化程度,虽然是个小功能,但是网站的流量都是从这样的小功能点点滴滴积累起来的.此效果可以使用CSS实现,但是由于现有浏览器对于CSS3支持度还不够好,所以使用js或者jQuery是不错的选择,下面就介绍一下如何使用jQuery实现此种效果.代码实例如下: 1 <!DOCTYPE html> 2 <html> 3 <head>