滚动条样式:自定义元素的滚动条

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>滚动条 - 样式</title>
    <style>
        body {
            margin: 0;
            padding: 0
        }

        body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }

        .container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            max-width: 640px;
            overflow: hidden;
            background-color: #f5f5f9;
            margin: auto;
        }

        /*移动端*/
        @media all and (max-width: 639px) {
            .container {
                overflow-y: scroll;
            }
        }

        /*PC端*/
        @media all and (min-width: 640px) {
            .container:hover, .container.hover {
                overflow-y: scroll;
            }

            ::-webkit-scrollbar {
                width: 6px;
                background-color: #FFF;
            }

            ::-webkit-scrollbar-button:start:decrement,
            ::-webkit-scrollbar-button:end:increment {
                display: block;
            }

            ::-webkit-scrollbar-button:vertical:start:increment,
            ::-webkit-scrollbar-button:vertical:end:decrement {
                display: none;
            }

            ::-webkit-scrollbar-button:end:increment {
                background-color: transparent;
            }

            ::-webkit-scrollbar-button:start:decrement {
                background-color: transparent;
            }

            ::-webkit-scrollbar-track-piece:vertical:start {
                background-color: transparent;
            }

            ::-webkit-scrollbar-track-piece:vertical:end {
                background-color: transparent;
            }

            ::-webkit-scrollbar-thumb:vertical {
                background: rgb(191, 191, 191);
            }
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        window.onresize = function () {
            scrollbarStyle()
        };
        window.onload = function () {
            scrollbarStyle()
        };
        function scrollbarStyle() {
            console.log(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i));
            if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i) != null) {
                if (window.innerWidth > 640) {
                    document.getElementById('container').className += ' ' + 'hover';
                }
            }
        }
    </script>
</head>
<body>
<div class="container" id="container">
    <br/>
</div>
</body>
</html>

scrollbar 滚动条的更多相关文章

  1. 用CSS调整scrollbar(滚动条)的配色

    可以通过调整CSS的方式,来给滚动条换色. 代码如下: .uicss-cn{ height:580px;overflow-y: scroll; scrollbar-face-color:#EAEAEA ...

  2. Tkinter 之ScrollBar滚动条标签

    一.参数说明 参数 作用 background (bg) 设置背景颜色 borderwidth (bd) 指定边框宽度,通常是 2 像素 cursor  指定当鼠标在上方飘过的时候的鼠标样式 orie ...

  3. 使用 Vue 开发 scrollbar 滚动条组件

    Vue 应该说是很火的一款前端库了,和 React 一样的高热度,今天就来用它写一个轻量的滚动条组件: 知识储备:要开发滚动条组件,需要知道知识点是如何计算滚动条的大小和位置,还有一个问题是如何监听容 ...

  4. WPF 自定义滚动条（ScrollView、ScrollBar）样式

    一.滚动条基本样式 本次修改Scrollview及ScrollBar滚动条样式是通过纯样式实现的.修改的内容包含滚动条的颜色,上下按钮的隐藏.另外添加了鼠标经过滚动条动画. style样式如下: &l ...

  5. Scrollbar

    Scrollbar(滚动条)组件用于滚动一些组件的可见范围,可分为垂直和水平的. 用法: from tkinter import * root =Tk() #滚动条组件 sb = Scrollbar( ...

  6. 背水一战 Windows 10 (46) - 控件（ScrollViewer 基础）: ScrollViewer, ScrollBar, ScrollContentPresenter

    [源码下载] 背水一战 Windows 10 (46) - 控件(ScrollViewer 基础): ScrollViewer, ScrollBar, ScrollContentPresenter 作 ...

  7. JS - 兼容到ie7的自定义样式的滚动条封装

    demo: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. tkinter学习-滚动条

    阅读目录 Listbox 以列表的形式显示 Scrollbar 滚动条 Scale 更滚动条很相似,但更精准 Listbox:  说明:列表框控件,在Listbox窗口小部件是用来显示一个字符串列表给 ...

  9. C# Chart控件，chart、Series、ChartArea曲线图绘制的重要属性

    http://blog.sina.com.cn/s/blog_621e24e20101cp64.html 为避免耽误不喜欢这种曲线图效果的亲们的时间,先看一下小DEMO效果图: 先简单说一下,从图中可 ...

随机推荐

  1. opencv编译：opencv 3.4.1 编译 contrib模块，增加人脸识别

    start cmake-gui select the opencv source code folder and the folder where binaries will be built (th ...

  2. 介绍一下再Apache下的Tomcat负载均衡的一些使用问题

    在负载均衡技术中,硬件设备是比较昂贵的,对于负载均衡的学习者如果不是在企业中应用或者是学员中学习,很少有机会能碰到实际操作的训练.(http://xz.8682222.com)所以,很多朋友都会选择软 ...

  3. 廖雪峰Java14Java操作XML和JSON-1XML-4第三方XML库

    总结: 使用Jackson可以快速在XML和JavaBean之间互相转换 可使用Annotation定制序列化和反序列化

  4. Linux命令查看文件内容

    cat:一次性顺序显示文件所有内容和 cat filename tac:一次性倒序显示文件所有内容和 tac filename head:显示文件开头的若干行内容 head -n filename t ...

  5. Mysql的数据列类型效率

    1.    能短就不要长.(磁盘I/O少一些) 比如固定 长度的CHAR数据列,定义 CHAR(40),而不是 CHAR(255); 比如MEDIUMINT代替BIGINT,数据表就小一些, 值的处理 ...

  6. shell学习笔记2: shell中的四则运算符

    shell中的四则运算符 n1,n2 :常量数字 char:运算符号 加,减,乘,除,取余(+,-,*,/,%) $a,$b:变量a,变量b 方法1 数字与符号之间需要有空格 不支持小数 expr n ...

  7. 5 第k大元素

    原题网址:http://www.lintcode.com/zh-cn/problem/kth-largest-element/ 在数组中找到第k大的元素 注意事项 你可以交换数组中的元素的位置 您在真 ...

  8. JDK源码阅读--HashMap

    public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Cloneable, ...

  9. Hie with the Pie (POJ 3311) 旅行商问题

    昨天想练习一下状态压缩,百度搜索看到有博客讨论POJ 3311,一看就是简单的旅行商问题,于是快速上手写了状态压缩,死活样例都没过... 画图模拟一遍原来多个城市可以重复走,然后就放弃思考了... 刚 ...

  10. PKU--3628 Bookshelf 2（01背包）

    题目http://poj.org/problem?id=3628 分析:给定一堆牛的高度,把牛叠加起来的高度超过牛棚的高度. 且是牛叠加的高度与牛棚高度之差最小. 把牛叠加的高度看作是背包的容量,利用 ...