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

<!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. QTableView的indexAt使用方法

    要实现的功能是QTableview中Item项上右键弹出菜单这就必然要判断点击右键时鼠标指针是否在QTableView的Item上 如果是QTableWidget可以用itemAt来判断QTableV ...

  2. thinkphp 模板主题

    一个模块如果需要支持多套模板文件的话,就可以使用模板主题功能. 默认情况下,没有开启模板主题功能,如果需要开启,设置 DEFAULT_THEME 参数即可: 大理石平台精度等级 // 设置默认的模板主 ...

  3. Django如何自定义漂亮的404页面

    目录 在templates 中添加404.html 修改settings.py 在templates 中添加404.html <!DOCTYPE html PUBLIC "-//W3C ...

  4. centos6 nginx安装好以后，添加拓展ssl

    前言 安装nginx的时候,只是执行最简单的安装,--user=nobody --group=nobody --prefix=/usr/local/nginx_1.8.1,没有安装http_ssl_m ...

  5. System.Web.Mvc.FileContentResult.cs

    ylbtech-System.Web.Mvc.FileContentResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, ...

  6. PAT甲级——A1098 Insertion or Heap Sort

    According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...

  7. Delphi遍历进程-Win32API

    本博客的Delphi代码使用的版本均为DelphiXE10.x 1.1 .枚举进程 通过进程名称获取指定的进程ID,代码很详细,不再赘述 unit Uuitls; interface uses TlH ...

  8. linux命令快速手记 — 让手指跟上思考的速度（四）

    pm2 list:列出pm2方式启动的所有程序 pm2 monit:显示每个应用程序的CPU和内存占用情况 scp:远程复制和本地上传,适用于本地ssh登录到远程服务器 scp root@10.10. ...

  9. logcat日志文件

    android日志系统提供了记录和查看系统调试信息的功能,日志都是从各个软件和一些系统的缓冲区中记录下来的,缓冲区可以通过logcat命令来进行查看和使用 开发者选项,有个选项叫做“日志记录器缓冲区大 ...

  10. Ubuntu 16.04下apt安装ssh及卸载（含FileZilla 使用过程）

    前言:文件发布测试过程中需要使用Windows和Ubuntu实现文件共享. 以下内容转载自:http://blog.csdn.net/jiang13479/article/details/535014 ...