滚动条详解：跨平台iOS、Android、小步伐滚动条隐藏及自定义样式综合指南 ...

滚动条是用户界面中的图形化组件，用于指示和控制内容区域的可滚动范围。当元素内容超出其视窗界限时，滚动条提供可视化线索，并答应用户通过鼠标滚轮、触屏滑动或直接拖动滑块来浏览未显示部分，实现内容的上下或左右滚动。它在保持界面整齐、避免内容溢出的同时，确保用户可以大概访问全部信息，提升浏览体验。
随着用户界面体验提升的要求，滚动条自定义样式以及滚动条隐藏精致化的需求日渐增长，本文具体先容了小步伐、iOS、Android平台滚动条的隐藏方法，以及滚动条一样平常自定义样式的方法。
一、滚动活动控制：overflow 属性

overflow 属性用于指定当一个元素的内容溢出其自身界限时，浏览器应如何处置惩罚。它有以下几种取值：

• visible：默认值，内容溢出时，会延伸到元素框之外，可见。
  
• hidden：内容溢出时，超出部分被裁剪，不可见。
  
• scroll：无论内容是否溢出，始终显示滚动条，答应用户滚动查察全部内容。
  
• auto：只有在内容现实溢出时才显示滚动条。
  

例子：

1. .container {
2.   width: 300px;
3.   height: 200px;
4.   overflow: auto; /* 或者 overflow-y: auto; overflow-x: auto; */
5. }
7. /* 或者单独设置水平/垂直滚动条 */
8. .horizontal-scroll {
9.   width: 300px;
10.   overflow-x: auto;
11. }
13. .vertical-scroll {
14.   height: 200px;
15.   overflow-y: auto;
16. }

复制代码

在这个例子中，.container 元素的宽度和高度固定，当其内容超出这些尺寸时，会自动出现滚动条。.horizontal-scroll 只答应水平滚动，而 .vertical-scroll 只答应垂直滚动。
二、隐藏滚动条

在很多环境下，隐藏滚动条会让页面显得精致，提升用户体验！隐藏滚动条的场景通常出现在追求简便、一体化视觉结果，或者须要最大化内容可视区域的用户界面计划中。以下列举了几种常见的须要隐藏滚动条的场景：

• 全屏/沉浸式体验：
  
  
  
  • 网页计划：全屏背景图像、视频或动画的网页布局，为了保持视觉的完整性，避免滚动条干扰用户的核心，通常会选择隐藏滚动条。
    
  • 应用步伐：全屏模式下的桌面或移动端应用步伐，如图片/视频编辑软件、游戏、演示工具等，须要最大化可用屏幕空间，隐藏滚动条可以避免打断界面的连续性。
    
  
  
• 响应式计划：
  
  
  
  • 移动装备：在手机和平板电脑等小屏幕装备上，为了充分利用有限的屏幕空间，计划师可能选择隐藏滚动条，让内容区域显得更大，提升阅读体验。
    
  • 窄屏视窗：在窄屏装备或浏览器窗口缩小时，隐藏滚动条可以淘汰界面元素的拥挤感，特别是在单栏布局或侧边栏内容较少的网页中。
    
  
  
• 特定风格UI：
  
  
  
  • 极简主义计划：追求极致简约、干净利落的用户界面，计划师可能会选择隐藏滚动条，以保持界面的纯粹与一致性。
    
  • 平面化/拟物化计划：在特定视觉风格的UI中，如平面化或拟物化计划，为了保持计划的一致性和避免破坏视觉语言，可能选择隐藏与风格不符的滚动条。
    
  
  
• 特定功能区：
  
  
  
  • 弹出框/模态窗口：对于小型的弹出框、模态对话框或提示信息，为了保持其轻量感和聚焦核心内容，常常隐藏滚动条。
    
  • 嵌入内容：如嵌入式iframe、嵌套滚动区域、卡片式计划中的独立内容块等，为了保持内容区域的独立性和视觉整齐，可能选择隐藏滚动条。
    
  
  
• 特定交互场景：
  
  
  
  • 滑动/滚动动画：在须要实现特定滚动或滑动动画结果的场景中，如Tabs、轮播图、时间线、故事流等，隐藏滚动条可以避免其与动画结果产生冲突，提升视觉流畅度。
    
  
  
• 特定内容类型：
  
  
  
  • 长文本阅读：在电子书阅读器、在线文档阅读、博客文章等以长文本为主的场景中，为了营造雷同纸质书的阅读体验，可能选择隐藏滚动条，让用户专注于文字内容本身。
    
  
  

须要注意的是，隐藏滚动条虽能提升界面美观度和专注度，但也可能导致用户难以感知内容是否可滚动，以及滚动位置。因此，在实行隐藏滚动条的计划时，通常须要确保内容的滚动交互仍旧直观易用，比方通过鼠标悬停、触摸滑动等操纵自然触发滚动活动，或者在须要的时间提供明确的滚动提示。
1、PC Web 隐藏滚动条

隐藏滚动条通常可以通过设置 CSS overflow 属性为 hidden 来实现。以下是如何隐藏滚动条的几种常见方法：
根本方法：使用 overflow: hidden

实用场景： 须要完全隐藏元素的滚动条，且不须要其内容可滚动。

1. /* 隐藏元素的所有滚动条（水平和垂直） */
2. .element {
3.   overflow: hidden;
4. }
6. /* 或者分别隐藏水平或垂直滚动条 */
7. .element {
8.   overflow-x: hidden; /* 隐藏水平滚动条 */
9.   overflow-y: hidden; /* 隐藏垂直滚动条 */
10. }

复制代码

针对特定浏览器的隐藏方法

实用于： 须要在特定浏览器（如Firefox、IE/Edge）中隐藏滚动条。

• Firefox: 使用 scrollbar-width 属性：
  

1. /* 隐藏滚动条（Firefox） */
2. .element {
3.   scrollbar-width: none; /* 隐藏滚动条 */
4. }

复制代码

• Internet Explorer 10+ 和 Microsoft Edge: 使用 -ms-overflow-style 属性：
  

1. /* 隐藏滚动条（IE 10+ 和 Edge） */
2. .element {
3.   -ms-overflow-style: none; /* 隐藏滚动条 */
4. }

复制代码

WebKit 浏览器（如 Chrome、Safari）中的隐藏方法

实用于： 须要在基于 WebKit 内核的浏览器中隐藏滚动条。
使用伪元素选择器 ::-webkit-scrollbar 及其相干子选择器，将滚动条的宽度设为零或直接隐藏：

1. /* 隐藏滚动条（WebKit-based browsers） */
2. .element::-webkit-scrollbar {
3.   display: none; /* 隐藏滚动条 */
4. }

复制代码

注意：

• 以上方法并不包管对全部浏览器都有兼容性。某些较旧的浏览器可能不支持某些属性或选择器。
  
• 使用 overflow: hidden 会导致内容被裁剪，假如须要内容可滚动但不显示滚动条，可能须要结合其他本领，如使用额外的容器或JavaScript辅助实现。
  
• 对于须要兼容不同浏览器的场景，可能须要同时应用多种方法，并共同条件注释或使用前端框架提供的浏览器特性检测工具来确保代码按需执行。
  

总之，隐藏滚动条重要依赖于设置 overflow 属性以及针对特定浏览器的特别CSS规则。根据项目需求和目标浏览器范围选择符合的方法即可。
2、小步伐隐藏滚动条（以uniapp为例）

2.1、取消页面滚动

可通过页面json设置文件设置disableScroll:true禁止整个页面滚动。disableScroll设置为 true 则页面整体不能上下滚动（bounce结果），只在页面设置中有用，在globalStyle中设置无效。

1. {
2.         "path": "pages/jingwhale/jingwhale",
3.         "style": {
4.                 "navigationBarTitleText": "JINGWHALE",
5.                 "disableScroll": true
6.         }
7. }

复制代码

设置编译到 App 平台时的特定样式，部分常用设置 H5 平台也支持。

1. {
2.         "path": "pages/jingwhale/jingwhale",
3.         "style": {
4.                 "navigationBarTitleText": "JINGWHALE",
5.                 "disableScroll": true
6.         },
7.         "app-plus":{
8.                 "scrollIndicator": "none", // app不显示滚动条
9.                 "bounce":"none" // app将回弹属性关掉
10.         }
11. }

复制代码

2.2、使用scroll-view隐藏滚动条

通过将scroll-view show-scrollbar值设置为false，来隐藏滚动条。

1. <scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y">
2.         <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
3.         <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
4.         <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
5. </scroll-view>

复制代码

假如scroll-view局部滚动的同时，内部还须要嵌套一层的环境下（如uni-list），则须要给嵌套层添加如下代码：

1. // 隐藏滚动条
2. ::-webkit-scrollbar {
3.         display: none;
4.         width: 0 !important;
5.         height: 0 !important;
6.         -webkit-appearance: none;
7.         background: transparent;
8. }

复制代码

3、Android 隐藏滚动条

3.1、方法一：

在xml文件的ScrollView控件中参加：

1. android:scrollbarThumbVertical="@android:color/transparent"

复制代码

3.2、方法二：

在xml文件的ScrollView控件中参加：

1. android:scrollbars="none"

复制代码

3.3、方法三：

在Java代码中设置获取ScrollView控件后设置

1. scroll.setVerticalScrollBarEnabled(false);

复制代码

3.4、方法四：

webview页面

1. overflow-x: scroll;  // 设置滚动
2. -webkit-overflow-scrolling: touch; //让滚动更流畅，不设置只要手指离开就立刻停止

复制代码

1. /*HTML5 元素超出部分滚动, 并隐藏滚动条*/
2. ::-webkit-scrollbar {
3.     display: none;
4. }

复制代码

4、IOS 隐藏滚动条

ios办理办法有两种：
4.1、设置高度来隐藏

子元素

1. .element {
2.    padding-bottom: 60px;// 滚动条向下移，外层盒子给定高overflow:hidden，解决ios无法隐藏滚动条问题
3.    box-sizing: border-box;
4.    overflow-x: scroll;
5.    /*解决ios上滑动不流畅*/
6.    -webkit-overflow-scrolling: touch;
7.    /*纵向超出部分将会隐藏，即滚动条部分被挤出可视区域*/
8.    overflow-y: hidden;
9.    scrollbar-width: none; /* firefox */
10.    -ms-overflow-style: none; /* IE 10+ */
11.    &::-webkit-scrollbar {
12.        display: none;
13.        width: 0px;
14.    }
15.    &::-webkit-scrollbar {
16.        display: none;
17.    }
18.    &::-webkit-scrollbar-track {
19.        background-color: none;
20.    }
21.    &::-webkit-scrollbar-thumb {
22.        background-color: none;
23.    }
24.    &::-webkit-scrollbar-thumb:hover {
25.        background-color: none;
26.    }
27.    &::-webkit-scrollbar-thumb:active {
28.        background-color: none;
29.    }
30. }

复制代码

父元素
滚动条外部元素设置定高，内内部元素超出定高，可以达到隐藏滚动条；

1. .wrap{
2.    height: 196px;
3.    overflow: hidden;
4. }

复制代码

4.2、设置边距来隐藏， 假如有阴影 可以实行选择这种方式

1. ul{
2.         padding-bottom: 40px;
3.         margin-bottom: -10px;
4. }

复制代码

三、自定义滚动条样式

对于支持的浏览器（尤其是基于WebKit的浏览器如Chrome、Safari），可以通过伪元素和特定的CSS扩展属性来定制滚动条的样式。以下是一些常用的滚动条相干样式属性：
通用滚动条样式

• scrollbar-width: 设置滚动条的厚度（仅实用于Firefox）。
  
• scrollbar-color: 设置滚动条的轨道（track）和滑块（thumb）的颜色（仅实用于Firefox）。
  

例子：

1. /* Firefox */
2. .container {
3.   scrollbar-width: thin; /* 或 thick, 或 none (隐藏滚动条) */
4.   scrollbar-color: #888 var(--primary-color); /* 轨道颜色和滑块颜色 */
5. }

复制代码

WebKit 滚动条样式

WebKit 提供了一系列前缀 -webkit-scrollbar 开头的属性来定制滚动条。这些属性包括：

• -webkit-scrollbar: 滚动条整体。
  
• -webkit-scrollbar-button: 滚动条两端的按钮。
  
• -webkit-scrollbar-thumb: 滚动条上的可拖动部分（滑块）。
  
• -webkit-scrollbar-track: 滚动条轨道（除了滑块以外的部分）。
  
• -webkit-scrollbar-track-piece: 与滑块接触的滚动条轨道部分。
  
• -webkit-scrollbar-corner: 滚动条角落（当有垂直和水平滚动条时）。
  
• -webkit-resizer: 容器右下角的调解大小的手柄（仅当元素可调解大小时可见）。
  

例子：

1. /* WebKit-based browsers (e.g., Chrome, Safari) */
2. .container::-webkit-scrollbar {
3.   width: 10px; /* 滚动条宽度 */
4.   height: 10px; /* 滚动条高度（对于垂直滚动条） */
5. }
7. .container::-webkit-scrollbar-thumb {
8.   background-color: var(--secondary-color);
9.   border-radius: 5px;
10. }
12. .container::-webkit-scrollbar-thumb:hover {
13.   background-color: var(--accent-color);
14. }
16. .container::-webkit-scrollbar-track {
17.   background-color: #f1f1f1;
18. }

复制代码

在这个例子中，我们为 .container 元素的滚动条设置了自定义宽度、滑块颜色（包括鼠标悬停时的变色）和轨道背景色。
注意事项：

• 自定义滚动条样式重要实用于现代浏览器，尤其是基于WebKit内核的浏览器。对于其他浏览器，可能须要使用JavaScript库或者polyfills来实现跨浏览器兼容性。
  
• 使用 -webkit-scrollbar 相干属性时，请确保查抄浏览器兼容性，并提供适当的回退样式以包管在不支持这些属性的浏览器中仍能正常使用滚动功能。
  

通过上述方法，您可以根据须要机动地控制元素的滚动活动并自定义滚动条样式，从而提升网页的用户体验和视觉一致性。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。