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

<!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. MYSQL随笔心得1

    cmd链接数据库命令: 输入密码进入 显示全部的数据库: 退出服务器连接,还有/p   quit 非关系型数据库:NOSQL,not only sql 不仅仅是SQL 代表:redis,mongodb

  2. 【珍惜时间】vue-websocket

    这个项目可能是个有始无终的项目?跟我一起分析吧,比较简单的一个项目 另外,我也想跟自己说,我好像失去了那个努力的自己了.要珍惜时间,好好加油啊~ 项目地址为:https://github.com/xi ...

  3. unordered_map

    #include <iostream> #include <cstdio> #include <queue> #include <algorithm> ...

  4. 2.vue插件总结——总有你能用上的插件

    UI组件 框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...

  5. antidependence and data hazard

    See below example. ADDD  F6, F0, F8 SUBD   F8, F10, F14 Some article would say that “ There’s an ant ...

  6. 你知道的和不知道的sass

    关于sass,大多数人的认识一个写css的工具而已 其实就是的 但是这个工具的威力你发挥了多少呢... 以下全部都是干货,希望你能用在自己的项目里 定义集合 我们通常是这么定义变量的 $warning ...

  7. 牛人blog 头脑风暴 (持续添加与更新)

    Http协议详解 http://www.cnblogs.com/TankXiao/archive/2012/02/13/2342672.html android 实现分享功能两种方法 http://w ...

  8. CDN与智能DNS原理和应用

    1.cdn概念,DNS概念 CDN:Centent Delivery Network(内容分发网络) 使用户可以就近取得所需内容,提高用户访问网站相应速度 CDN=更智能的镜像+缓存+流量导流: DN ...

  9. NAT后的FTP服务器部署笔记

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2017年2月5日) 寒假开始以后,过年之前有一个任务,为实验室的人搭建一个FTP,用之前部署好的物理服务器.这本就是网管干 ...

  10. 由VMnet引起的browser-sync故障解决方案

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年7月11日) 今天晚上,前端组的小伙伴问我说能不能帮忙看看他的电脑为什么在安装了browser-sync插件以后, ...