ios下滚动条默认显示

研究这个问题的背景:

众所周知,ios下垂直和水平滚动条都是默认不出现,用户滑动时,才显示,滑动结束以后,又隐藏滚动条。

横向滚动条默认隐藏,用户很可能会忽略右侧被隐藏的部分,由于模块的特殊性,让滚动条默认出现是成本的小的处理方案。

因此就有了让滚动条默认出现的需求了

安卓下是默认滚动条出现的,因此不再今天的讨论范围

在研究ios下让滚动条默认出现的过程中遇到几个坑,和大家分享一下

scrollbar基本知识

首先了解一下scrollbar的各个部件

部件名称:

The-webkit-scrollbarfamily of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element: ::-webkit-scrollbaraddresses the background of the bar itself. It is usually covered by the other elements ::-webkit-scrollbar-buttonaddresses the directional buttons on the scrollbar ::-webkit-scrollbar-trackaddresses the empty space “below” the progress bar ::-webkit-scrollbar-track-pieceis the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb) ::-webkit-scrollbar-thumbaddresses the draggable scrolling element that resizes depending on the size of the scrollable element ::-webkit-scrollbar-corneraddresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet ::-webkit-resizeraddresses the draggable resizing handle that appears above thescrollbar-cornerat the bottom corner of some elements

回到主题

实现ios下滚动条默认显示一共有两个地方需要注意的

1、横向滚动条需要设置高度(纵向滚动条需要设置宽度)

在设置了::-webkit-scrollbar-thumb以及::-webkit-scrollbar-track-piece的背景颜色情况下,如果不设置::-webkit-scrollbar宽度(高度),滚动条是不会出现的

2、-webkit-overflow-scrolling: touch;属性让ios默认不显示滚动条

-webkit-overflow-scrolling属性是定义是否使用回弹效果;默认值是auto;当-webkit-overflow-scrolling设置为touch时,ios会有回弹效果,但是,此时对于滚动条设置的所有样式就会失效,浏览器会使用系统默认的样式以及默认滚动条不显示

总结:

1、滚动条也是可以设置hover和active的

2、单独设置横向(纵向)滚动条样式时需要添加:horizontal(:vertical)

3、::-webkit-scrollbar-track-piece可以设置滚动前与滚动后的轨道样式(:decrement,:increment)

DEMO:

<!DOCTYPE html>

<html>

<head>

<title>练小习的前端技术笔记</title>

<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">

<style>

*{

padding:0;

margin:0;

}

.test{

padding: 10px;

margin: 20px;

box-sizing: border-box;

font-size: 12px;

resize: none;

-webkit-overflow-scrolling: auto;

height: 300px;

width:500px;

overflow-x: scroll;

overflow-y: hidden;

padding: 0

}

.test > div{

width: 310px;

white-space: nowrap;

}

::-webkit-scrollbar{

width: 3px;

height: 3px;

}

::-webkit-scrollbar-thumb:horizontal {

background-color: #a6a6a6;

border-radius: 3px;

}

::-webkit-scrollbar-track-piece:horizontal:decrement,

::-webkit-scrollbar-track-piece:horizontal:increment {

background-color: rgba(166, 166, 166, 0.2);

}

</style>

</head>

<body>

<div class="test">

<div>

testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest

</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏流柯技术学院

selenium截取具体元素图片(python版)

element = driver.find_element_by_id("xx")

481
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

512
来自专栏前端杂货铺

响应式web布局中iframe的自适应

困境           在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度...

33512
来自专栏.Net移动开发

用VS2017进行移动开发(C#、VB.NET)——Progress控件,Smobiler移动开发

该属性默认设置为“255”,即不透明;若将该属性设置为“0”,该控件的背景色即为全透明的,显示为Smobiler窗体设计界面的背景色。

1083
来自专栏pangguoming

CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技...

38210
来自专栏Micro_awake web

原生js实现图片轮播效果

思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: ...

2076
来自专栏飞扬的花生

Bootstrap学习------Tabel

     Bootstrap的表格和Html表格大同小异,只是封装了一些css供我们使用 <table>标签必须引用class="table"基类样式,我们可以...

1815
来自专栏james大数据架构

LinearLayout(线性布局)

要点: android:orientation="vertical"垂直线性布局,"horizontal"水平线性布局 android:gravity="top...

1849
来自专栏编程

一行JS代码实现翻翻卡效果

本文章是由源码时代H5前端讲师分享:一行JS代码实现翻翻卡效果,希望对大家有一定帮助。 实现步骤 准备2张图片,一个在上一个在下 上方的图片不动,下方的图片先翻...

1688
来自专栏偏前端工程师的驿站

JS魔法堂:关于元素位置和鼠标位置的属性

一、关于鼠标位置的属性                           1. 触发鼠标事件的区域       盒子模型中的border,padding,co...

18210

扫码关注云+社区