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

<!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. 2018-8-10-win10-uwp-验证输入-自定义用户控件

    title author date CreateTime categories win10 uwp 验证输入 自定义用户控件 lindexi 2018-08-10 19:16:51 +0800 201 ...

  2. 2019-8-2-WPF-依赖属性绑定不上调试方法

    title author date CreateTime categories WPF 依赖属性绑定不上调试方法 lindexi 2019-08-02 19:56:32 +0800 2019-8-2 ...

  3. JavaScript中定义函数的几种方式

    函数的组成:函数名 + 函数体 1.使用function关键字定义函数 -- 具有优先级,优先将function关键字定义的函数优先执行 function  functionName(arg0, ar ...

  4. 如何将存储在MongoDB数据库中的数据导出到Excel中？

    将MongoDB数据库中的数据导出到Excel中,只需以下几个步骤: (1)首先,打开MongoDB安装目录下的bin文件夹,(C:\Program Files (x86)\MongoDB\Serve ...

  5. jvisualvm 工具使用【转】

    VisualVM 是Netbeans的profile子项目,已在JDK6.0 update 7 中自带(java启动时不需要特定参数,监控工具在bin/jvisualvm.exe). https:// ...

  6. 使用Ajax获取多选框用户选择的值问题

    目录 说明 正文 说明 在web开发过程中,将多选框的值提交到django后台,有两种提交方式: form表单提交 ajax异步提交 我需要使用ajax将复选框的值提交到后台,记录一下当时碰到的问题 ...

  7. duilib教程之duilib入门简明教程1.前言

    关于duilib的介绍就不多讲了,一来不熟,二来小伙伴们想必已经对比了多个界面库,也无需赘述.下面进入正题:    不看广告看疗效! 已有众多知名公司采用duilib做为界面库,如华为网盘.PPS(P ...

  8. vue 单纯的获取经纬度 百度与高德 H5

    首先用百度的api举个例子 首先在index页面引入如下: <script type="text/javascript" src="http://api.map.b ...

  9. 使用R进行数据提取

    使用R进行数据提取 数据提取是数据分析日常工作中遇到最多的需求,本篇文章介绍如何通过R按特定的维度或条件对数据进行提取,完成数据提取需求. 读取并创建数据表 首先第一步是读取数据,并创建名称为loan ...

  10. RvmTranslator7.2

    1. RvmTranslator7.2 增加一个视图方块,方便视图切换; Download: https://github.com/eryar/RvmTranslator/releases/tag/7 ...