一般默认的滚动条会比较丑，我们可以用简单的js实现自定义滚动条的功能；

代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>标题</title>

<meta name="keywords" content="">

<meta name="description" content="">

<style>

    *{margin:0; padding:0; list-style:none;}

    body{

        height:2000px;

    }

    .box1{

        width: 320px;

        height: 400px;

        background: #ccc;

        overflow: hidden;

        overflow-y: scroll;

        margin: 20px 0 0 100px;

    }

    .con1{

        font-size: 18px;

    }

    #out{

        width: 320px;

        height: 400px;

        background: url(bg1.png) 0 0 repeat-x;

        position: absolute;

        left: 500px;

        top: 20px;

        overflow: hidden;

    }

    #con{

        width: 280px;

        padding: 5px;

        font-size: 18px;

        position: absolute;

        left: 0px;

        top: 0px;

    }

    #box{

        width: 30px;

        height: 400px;

        position: absolute;

        right: 0;

        top: 0;

    }

    #drag{

        width: 30px;

        height: 53px;

        background: url(icon2.png) 0 0 no-repeat;

        position: absolute;

        left: 0px;

        top: 0px;

    }

</style>

</head>

<body>

<div class="box1">

    <p class="con1">据新华社电中航工业、国机集团等8家央企6日在京签约，在重要项目、科技转化等相关领域开展重组合作整合，这将成为央企间产业联合协作的新典范，也将开启央企间产业重组合作整合的新阶段。

相关合作内容包括：中航工业和国机集团共同发展八万吨模锻压机项目；中航工业将房地产业务全部划转保利集团，中核建设和中国一重在高温气冷堆主设备制造领域合作，兵器工业、兵器装备、中国国新对北方公司进行股权重组。

国务院国资委主任肖亚庆在6日参加中央企业产业合作座谈会上表示，下一步，国资委政策将加码推动央企产业重组步伐，通过业务整合、资产重组、股权合作、资产置换、无偿划转、协议转让、战略联盟、联合开发等多途径，加快央企间产业重组合作整合。

肖亚庆同时清晰地勾勒出国企改革兼并重组“路线图”：通过产业重组，在突破关键技术、掌握核心资源，打造知名品牌等方面，实现产业重组合作“一加一大于二”的效果。肖亚庆同时透露，目前部分央企在牵头技术创新战略联盟、设立创新投资基金、构建创新孵化平台等方面，取得了重大突破。据统计，央企牵头国家及地方技术创新联盟141个，50多家中央企业共发起和参与基金179只，构建面向社会的创新孵化平台57个，创业创新平台27个。

“此次集中签约，意味着央企重组的重心开始向资本、项目、产业板块等内部要素转移。”中国企业研究院首席研究员李锦说，未来，央企间产业重组合作整合将被更快地推进，央企内部的各种要素将被再次优化。</p>

</div>

<div id="out">

    <div id="con">据新华社电中航工业、国机集团等8家央企6日在京签约，在重要项目、科技转化等相关领域开展重组合作整合，这将成为央企间产业联合协作的新典范，也将开启央企间产业重组合作整合的新阶段。

相关合作内容包括：中航工业和国机集团共同发展八万吨模锻压机项目；中航工业将房地产业务全部划转保利集团，中核建设和中国一重在高温气冷堆主设备制造领域合作，兵器工业、兵器装备、中国国新对北方公司进行股权重组。

国务院国资委主任肖亚庆在6日参加中央企业产业合作座谈会上表示，下一步，国资委政策将加码推动央企产业重组步伐，通过业务整合、资产重组、股权合作、资产置换、无偿划转、协议转让、战略联盟、联合开发等多途径，加快央企间产业重组合作整合。

肖亚庆同时清晰地勾勒出国企改革兼并重组“路线图”：通过产业重组，在突破关键技术、掌握核心资源，打造知名品牌等方面，实现产业重组合作“一加一大于二”的效果。肖亚庆同时透露，目前部分央企在牵头技术创新战略联盟、设立创新投资基金、构建创新孵化平台等方面，取得了重大突破。据统计，央企牵头国家及地方技术创新联盟141个，50多家中央企业共发起和参与基金179只，构建面向社会的创新孵化平台57个，创业创新平台27个。

“此次集中签约，意味着央企重组的重心开始向资本、项目、产业板块等内部要素转移。”中国企业研究院首席研究员李锦说，未来，央企间产业重组合作整合将被更快地推进，央企内部的各种要素将被再次优化。</div>

    <div id="box">

        <p id="drag"></p>

    </div>

</div>

<script>

    var out=document.getElementById('out');

    var con=document.getElementById('con');

    var box=document.getElementById('box');

    var drag=document.getElementById('drag');

    drag.onmousedown=function (ev){

        var e=ev||window.event;

        if (e.preventDefault) {

            e.preventDefault();

        } else{

            e.returnValue=false;

        };

        var d_bkt=e.clientY-drag.offsetTop;

        document.onmousemove=function (ev){

            var e=ev||window.event;

            var top=e.clientY-d_bkt;

            if (top<=0) {

                top=0;

            };

            if (top>=box.clientHeight-drag.clientHeight) {

                top=box.clientHeight-drag.clientHeight;

            };

            var scale=top/(box.clientHeight-drag.clientHeight);

            var cony=scale*(con.clientHeight-out.clientHeight);

            drag.style.top=top+'px';

            con.style.top=-cony+'px';

            console.log(top);

        }

        document.onmouseup=function (){

            document.onmousemove=null;

        }

    }

    var str=window.navigator.userAgent.toLowerCase();

    if (str.indexOf('firefox')!=-1) {//火狐浏览器

        out.addEventListener('DOMMouseScroll',function (e){

            e.preventDefault();//阻止窗口默认的滚动事件

        if (e.detail<0) {

            var t=con.offsetTop+20;

            if (t>=0) {

                t=0;

            };

            if (t<=-(con.clientHeight-out.clientHeight)) {

                t=-(con.clientHeight-out.clientHeight);

            };

            var scale=t/(con.clientHeight-out.clientHeight);

            var top=scale*(box.clientHeight-drag.clientHeight);

            con.style.top=t+'px';

            drag.style.top=-top+'px';

        };

        if (e.detail>0) {

            var t=con.offsetTop-20;

            if (t>=0) {

                t=0;

            };

            if (t<=-(con.clientHeight-out.clientHeight)) {

                t=-(con.clientHeight-out.clientHeight);

            };

            var scale=t/(con.clientHeight-out.clientHeight);

            var top=scale*(box.clientHeight-drag.clientHeight);

            con.style.top=t+'px';

            drag.style.top=-top+'px';

        };

        },false);

    } else{//非火狐浏览器

        out.onmousewheel=function (ev){

            var e=ev||window.event;

            if (e.preventDefault) {

                e.preventDefault();

            } else{

                e.returnValue=false;

            };

            if (e.wheelDelta>0) {

            var t=con.offsetTop+20;

            if (t>=0) {

                t=0;

            };

            if (t<=-(con.clientHeight-out.clientHeight)) {

                t=-(con.clientHeight-out.clientHeight);

            };

            var scale=t/(con.clientHeight-out.clientHeight);

            var top=scale*(box.clientHeight-drag.clientHeight);

            con.style.top=t+'px';

            drag.style.top=-top+'px';

        };

        if (e.wheelDelta<0) {

            var t=con.offsetTop-20;

            if (t>=0) {

                t=0;

            };

            if (t<=-(con.clientHeight-out.clientHeight)) {

                t=-(con.clientHeight-out.clientHeight);

            };

            var scale=t/(con.clientHeight-out.clientHeight);

            var top=scale*(box.clientHeight-drag.clientHeight);

            con.style.top=t+'px';

            drag.style.top=-top+'px';

        };

        }

    };

</script>

</body>

</html>

利用JS实现自定义滚动条的更多相关文章

  1. Vue.js 桌面端自定义滚动条组件|vue美化滚动条VScroll

    基于vue.js开发的小巧PC端自定义滚动条组件VScroll. 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue ...

  2. 利用CSS3新特性实现完全兼容的自定义滚动条。

    背景:最近项目里面因为统一页面风格,用到了自定义滚动条,在完成之前的那个滚动条的时候,与网上各个滚动条插件实现的方法类似,相当于造了轮子,通过css3的 网上看到的滚动条插件多数是通过监听内容的滚动事 ...

  3. js自定义滚动条

    今天听到别人说自定义滚动条,所以就在吃饭的时间写了个 html部分 <div class="out" id="out"> <div class ...

  4. css和js实现硬件加速渲染自定义滚动条

    听别人说用CSS的变换来实现渲染有硬件加速的效果,看到很多大网站都开始陆续使用上了,我也来说说怎么做,我这边实现的滚动条有自然滚动效果,看起来比较自然,说的再多不如直接写,让我们开始吧! 我们需要自己 ...

  5. 自定义滚动条Js简版

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>自定义滚 ...

  6. CSS3自定义滚动条样式 -webkit-scrollbar(转)

    有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了.那webkit浏览器是如何自定义滚动条的呢? 前言 ...

  7. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  8. javascript 学习之自定义滚动条加滚轮事件

    要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...

  9. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

随机推荐

  1. socket编程热身程序

    /*server.c*/ #include <stdio.h> #include <arpa/inet.h> #include <sys/types.h> /* S ...

  2. 今天在学习NTP时发现了2个网站

    NTP 调整系统时间 一个网站是:http://chrony.tuxfamily.org/doc/1.31/manual.html  这个是专门介绍chrony的,做的很详细. 另外一个是:http: ...

  3. jquery和dom之间的转换

    刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

  4. (转载)robots.txt写法大全和robots.txt语法的作用

    1如果允许所有搜索引擎访问网站的所有部分的话 我们可以建立一个空白的文本文档,命名为robots.txt放在网站的根目录下即可.robots.txt写法如下:User-agent: *Disallow ...

  5. Java 8之二小坑：stream parallel 和 lamada

    Stream:parallel乱序 Java 8 stream流为处理集合时非常方便.遇到的一个坑是为了提高在多核cpu下的性能,尝试了parallel().数据源是HashSet的,在做分割的时候发 ...

  6. 曲面之美：三星 S6 Edge+

    这些年安卓手机阵营一直拼得又激烈又惨烈,从拼配置,拼性能,拼性价比,到拼颜值拼情怀,拼得用户也都麻木了. 尤其是我这样的用户,不喜欢墨守成规,你配置高又如何,同样价钱的配置都差不多. 我想看不一样的东 ...

  7. ListView加checkBox可以实现全选等功能

    1.效果图 2.LIteView_item布局 <?xml version="1.0" encoding="utf-8"?> <Relativ ...

  8. 安装oracle

    1.安装vnc  yum install tigervnc tigervnc-server 2.vncserver启动 3.安装依赖库 yum install -y compat-libstdc*   ...

  9. apache自带的web监控器配置

    第一:将mod_status模块放开,即去掉httpd.conf中的# 第二:在httpd.conf后面添加下面内容 <Location /server-status> SetHandle ...

  10. AT常见问题

    https://m.douban.com/note/247040789/?from=author