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

<!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. Hadoop 2.x 版本中的依赖 jar

  2. [NOIP2019模拟赛][AT2381] Nuske vs Phantom Thnook

    题目链接 评测姬好快啊(港记号?)暴力40pts变成60pts 因为题目说了保证蓝色点两两之间只有一条路径,所以肯定组成了一棵树,而对于每次询问的x1,y1,x2,y2的子矩阵中就存在着一个森林 不难 ...

  3. C++ 系列：基础知识储备

    Copyright © 2000-2017, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ ----------------- ...

  4. Android开发 获取视频中的信息(例如预览图或视频时长) MediaMetadataRetriever媒体元数据检索器

    前言 在Android里获取视频的信息主要依靠MediaMetadataRetriever实现 获取最佳视频预览图 所谓的最佳就是MediaMetadataRetriever自己计算的 /** * 获 ...

  5. SQL数据表纵横转换

    SELECT DISTINCT '(select b.risk from rhwl_easy_genes_new_risk b where b.genes_id=a.id and b.disease= ...

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

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

  7. watchbog再升级，企业黄金修补期不断缩小，或面临蠕虫和恶意攻击

    概要 近日,阿里云安全团队发现wacthbo挖矿团伙[1]新增了CVE_2019_5475 的漏洞利用代码,并开始进行尝试性攻击.通过对CVE_2019_5475漏洞的生命周期进行分析后发现,漏洞批量 ...

  8. 0905NOIP模拟测试赛后总结

    40分rank33.连续爆炸祭. 这次爆炸和心态无关.主要是答题策略出了点问题.T2大众分20.暴搜打表非常强. 拿到题目看到前面人都看pdf,突然想跟风皮一把,就把刚下的doc也转成pdf了hhh ...

  9. 0819NOIP模拟测试赛后总结

    这次挂得很悲伤. T1.T3我都想到正解了…… 结果T1少看了个条件:20%保证ai互不相等.以为100%…… 然后挂到了20分,赛后加了个set不到1分钟就A掉了.. T2把分骗满跑路. T3sb线 ...

  10. light oj 1422 区间dp

    #include <stdio.h> #include <string.h> #include <stdlib.h> #include <math.h> ...