自定义滚动条

在PC端,无论哪款浏览器提供的默认滚动条,样式都是很丑,无法满足现在页面设计的要求,为此衍生出了无数的模拟滚动条的插件,这些插件可以使用CSS来美化滚动条

在PC端,无论哪款浏览器提供的默认滚动条,样式都是很丑,无法满足现在页面设计的要求,为此衍生出了无数的模拟滚动条的插件,这些插件可以使用CSS来美化滚动条。当然,在实际的项目中,还有其他常见的场景。

1. 无滚动条但依然可以滚动

实际内容超过了容器的高度,只能使用滚轮进行滚动。这种情形下,默认只能进行垂直滚动,不能进行上下滚动。当然,如果要实现滚轮进行横向滚动,这就需要借助js添加滚轮事件。这一小节里,我们只讨论垂直滚动的情况。

其实实现无滚动条但依然可以滚动,不用任何的js就能实现:比如.content是一个有滚动条的容器,他的高度和宽度分别是width:400px; height:300px;,我们可以在.content外面再添加一个div(.wrap),让这个div的宽度正好遮住 .content 的滚动条:

<style type="text/css">
    .wrap{
        width: 400px;
        height: 300px;
        overflow: hidden;  /* 遮住滚动条 */
        border: 1px solid #aaa;
    }
    .content{
        width: 417px; /* 一般滚动条的宽度差不多是17px */
        height: 300px;
        overflow: auto;
    }
</style>
<div class="wrap">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend.</p>
        <p>In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        <p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. </p>
        <p>Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis.</p>
        <p> Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
    </div>
</div>

这种方式没有兼容性问题,在任何浏览器都可以,技术上实现起来也很简单;唯一的缺点就是用户对滚动不太敏感,可能不知道需要滚动才能查看下面的内容。

  1. 美化后的滚动条
    这种情形下,需要的是浏览器自带的滚动条,依然不需要借助js,只不过需要对滚动条进行美化;但是滚动条的美化是有浏览器兼容性的,只有webkit内核的浏览器(chrome, opera, safari等)才支持,firefox到目前位置还不支持滚动条美化,IE浏览器只支持修改滚动条的颜色,其他的则无法修改。

我们先来看看webkit下滚动条的美化,webkit下是使用的伪元素:

/* 设置垂直滚动条的宽度和水平滚动条的高度 */
.demo::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

/* 设置滚动条的滑轨 */
.demo::-webkit-scrollbar-track {
      background-color: #ddd;
}

/* 滑块 */
.demo::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
}

 /* 滑轨两头的监听按钮 */
.demo::-webkit-scrollbar-button {
    background-color: #888;
    display: none;
}

/* 横向滚动条和纵向滚动条相交处尖角 */
.demo::-webkit-scrollbar-corner {
    /*background-color: black;*/
}

看了上面美化滚动条的属性,如果不考虑兼容性的问题,我们还可以使用-webkit-scrollbar来隐藏滚动条,不用再在外面套一个div了,而且依然可以滚动。

IE浏览器下滚动条下,使用样式进行美化,而且只能修改颜色:

  • scrollbar-arrow-color: color; /三角箭头的颜色/

  • scrollbar-face-color: color; /立体滚动条的颜色(包括箭头部分的背景色)/

  • scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/

  • scrollbar-highlight-color: color; /滚动条的高亮颜色(左阴影?)/

  • scrollbar-shadow-color: color; /立体滚动条阴影的颜色/

  • scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/

  • scrollbar-track-color: color; /立体滚动条背景颜色/

  • scrollbar-base-color:color; /滚动条的基色/

当前样式只在IE下有效果:

3. 自定义滚动条

自定义滚动条借助js里的滚轮事件,mousemove事件等,使用div来模拟一个滚动条,然后根据位移,滚动条和内容移动相应的距离。

这里需要先定义几个简单的变量:

  • wrap_height : 外层容器的高度

  • content_height : 内容的实际高度,通常大于外层容器的高度

  • content_dis : 内容当前的位置

  • bar_height : 滚动条的长度

  • bar_dis : 滚动条当前的位置

滚动条与其滚动区域的比例和外层容器与实际内容的比例是相等的,这样就能计算出滚动条的长度,即:

bar_height/wrap_height = wrap_height/content_height;

bar_height = wrap_height*wrap_height/content_height;  // 滚动条的长度

同理,滚动条滚动的距离与内容滚动的距离也是成比例的,因为我们实际操作的是滚动条,通过这个我们能知道滚动条滚动的距离后,得出内容滚动的距离:

bar_dis/(wrap_height-bar_height) = content_dis/(content_height-wrap_height);

content_dis = (content_height-wrap_height)*bar_dis/(wrap_height-bar_height); 

滚动条和内容的滚动,实际上是修改这两者的top值。接下来就是为滚动条添加mousedown, mousemove, mouseup事件,通过这些事件修改滚动条的top值。在鼠标按下(mousedown)时,获取鼠标当前的pageY1(IE不支持pageX、pageY属性,但支持offsetX、offsetY)和滚动条的top值,然后在鼠标移动(mousemove)时,再获取鼠标的pageY2(offsetY),根据两个pageY,计算出鼠标的偏移量(pageY2-pageY1),即滚动条的偏移量bar_diff。bar_diff加上滚动条初始时的top值,就是滚动条现在的top值。根据上面的公式也能计算出内容的偏移量。

$scroll_bar.css('height', scroll_bar_height)
    .on('mousedown', function(event){
        var $this = $(this),
            startX = event.pageY,
            top = $this.position().top;

        $(document).on('mousemove', function(e){
            var diff = e.pageY - startX;
            changePos( top+diff );
        }).on('mouseup', function(event){
            $(this).off('mousemove mouseup');
            this.releaseCapture && this.releaseCapture();
        });

        this.setCapture && this.setCapture();
    });

// 设置滚动条和内容的top值
// end表示滚动条当前滚动到的位置
function changePos(end){
    if(end < 0){
        end = 0;
    }else if(end > obj_height - scroll_bar_height){
        end = obj_height - scroll_bar_height;
    }

    $scroll_bar.css('top', end);
    $scroll_con.css('top', -(scroll_con_height - obj_height)*end/(obj_height - scroll_bar_height));
}

如果容器的高度可能随着窗口变化,或者其他原因导致容器的高度发生变化,都需要重新计算滚动条的长度和能够滚动的区域。

张鑫旭大神在他自己的博客里曾经总结过关于滚轮的事件,这里拿来一下,相关链接请下拉到最后:

var addEvent = (function(window, undefined) {        
    var _eventCompat = function(event) {
        var type = event.type;
        if (type == 'DOMMouseScroll' || type == 'mousewheel') {
            event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
        }
        //alert(event.delta);
        if (event.srcElement && !event.target) {
            event.target = event.srcElement;    
        }
        if (!event.preventDefault && event.returnValue !== undefined) {
            event.preventDefault = function() {
                event.returnValue = false;
            };
        }
        /* 
           ......其他一些兼容性处理 */
        return event;
    };
    if (window.addEventListener) {
        return function(el, type, fn, capture) {
            if (type === "mousewheel" && document.mozHidden !== undefined) {
                type = "DOMMouseScroll";
            }
            el.addEventListener(type, function(event) {
                fn.call(this, _eventCompat(event));
            }, capture || false);
        }
    } else if (window.attachEvent) {
        return function(el, type, fn, capture) {
            el.attachEvent("on" + type, function(event) {
                event = event || window.event;
                fn.call(el, _eventCompat(event));    
            });
        }
    }
    return function() {};
})(window); 
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容