最新消息:你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

ios下滚动条默认显示

表现 练小习 1评论

研究这个问题的背景:

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

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

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

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

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

scrollbar基本知识

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

1

部件名称:

2

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的

3

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

4

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

5

DEMO:

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

转载请注明:练小习的前端技术笔记 » ios下滚动条默认显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 好东西,学习了
    蛙奥2周前 (01-03)回复