H5页面IOS系统的滚动条怎么去掉

原创 已于 2022-02-21 11:14:50 修改 · 2.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ios #css #css3

于 2021-07-15 23:30:46 首次发布
在iOS系统中，为了实现H5页面滚动条的隐藏，可以通过添加特定的CSS样式来达到目的。通过使用Flex布局，并设置相关样式，可以使得页面滚动更加平滑且隐藏滚动条。

设置css样式，要加这两句

::-webkit-scrollbar {
   
   
display:none；
width:0;
}

加上下面这两句可以让滚动更加流畅

-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;

采用fle布局，子盒子的宽度撑开父盒子


                

                
                
        

    


  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
ios上滚动条不能滑动 滚动卡住的问题

				
			

			

				

					江拥羡橙的博客
				

				

					12-02
					
					1225
					
				

			

		

		

			
				
3.滑动容器的所有父元素添加样式（只给要滚动父容器添加即可）iosapp上viewweb h5不能滑动的问题。1.给滑动容器添加样式。

			
		

	



                

            
              



	

		

			

				
					
h5 隐藏滚动条

				
			

			

				

					拥抱AI Design
				

				

					08-13
					
					9335
					
				

			

		

		

			
				
本文只要介绍通过css，实现H5隐藏滚动条。

在父类.class名下，也可以放在body，全局隐藏滚动条。
.class{
 &::-webkit-scrollbar{
       background-color:transparent;
    }
}


...

			
		

	



              


  
              

                


	

		

			

				
					
css隐藏移动端滚动条并且ios上平滑滚动的方法

				
			

			

				

					11-21
				

			

		

		

			
				
css隐藏移动端滚动条并且ios上平滑滚动的方法
HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <titl

			
		

	





	

		

			

				
					
uniapp+uView1.0做H5应用的时候，ios系统右侧会显示滚动条，如何隐藏ios下的滚动条

				
			

			

				

					azlnhaha的博客
				

				

					12-09
					
					3177
					
				

			

		

		

			
				
uniapp 

			
		

	



		

			
		



	

		

			

				
					
去除滚动条，以及h5页面ios滑动不流畅

				
			

			

				

					成长笔记
				

				

					04-09
					
					874
					
				

			

		

		

			
				
1.去除滚动条


::-webkit-scrollbar {
    display: none;
}

2.h5页面ios滑动不流畅

设置需要滑动的元素


-webkit-overflow-scrolling: touch;




			
		

	





	

		

			

				
					
fedora如何隐藏顶部状态栏_藏在 iOS 13 里的 9 个隐藏小技巧

				
			

			

				

					weixin_39860123的博客
				

				

					11-12
					
					625
					
				

			

		

		

			
				
正文共：1797字10图1.从控制中心直接选择无线网络和蓝牙配件苹果首次在 iOS 7 中加入了控制中心，允许用户进行一些快速操作，例如打开/关闭飞行模式、打开/关闭蜂窝网络、打开/关闭 Wi-Fi 等。但很多控制都只停留在一级菜单，你只能关闭或开启而无法直接选择无线网络和蓝牙配件。但 iOS 13/iPadOS 正式打通了这一操作，选择无线网络和蓝牙配件都能够直接在控制中心完成。※ ...

			
		

	





	

		

			

				
					
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案

				
			

			

				

					01-05
				

			

		

		

			
				
滚动之前，先设-webit-overflow-scrolling的属性值为auto，然后页面滚动完了，再设为touch即可。 实例：  $(#id).css(&#39;-webkit-overflow-scrolling&#39;,&#39;auto&#39;); $(#id).scrollTop(9999); $(#id).css(&#39;-webkit-overflow

			
		

	





	

		

			

				
					
h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽

				
			

			

				

					01-03
				

			

		

		

			
				
在ios下，双击屏幕某些地方，滚动条会自动向上走一段。 当用微信看h5的时候，拖拽到底部，会漏出来，微信自带下面的灰黑色皮肤。 用js解决一下吧，这俩问题很类似，总结到一起了。 ———-特别注意，安卓没有发生过...

			
		

	





	

		

			

				
					
iOS自定义水平滚动条、进度条

				
			

			

				

					08-26
				

			

		

		

			
				
iOS自定义水平滚动条、进度条  iOS自定义水平滚动条、进度条是iOS应用程序中非常重要的UI组件之一。滚动条和进度条可以用来显示进度、进度、评分等信息，今天我们将详细介绍如何自定义水平滚动条和进度条。  首先，...

			
		

	





	

		

			

				
					
h5 可以滚动并隐藏滚动条

				
			

			

				

					Yipitre的博客
				

				

					11-22
					
					1766
					
				

			

		

		

			
				
```html
.appearn_conten {
    overflow:auto;//滚动
}
.appearn_conten::-webkit-scrollbar {
    display: none;//隐藏滚动条
  }






			
		

	





	

		

			

				
					
纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

				
			

			

				

					weixin_30649859的博客
				

				

					09-22
					
					602
					
				

			

		

		

			
				
html代码展示（直接复制代码保存至本地文件运行即可）：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, ma...

			
		

	





	

		

			

				
					
iosh5页面去不了滚动条嘛

				
			

			

				

					weixin_42495556的博客
				

				

					08-04
					
					266
					
				

			

		

		

			
				
如何实现 iOS H5 页面去掉滚动条
在移动端开发中，H5页面的用户体验尤为重要。为了让用户在使用时体验更佳，开发者常常会选择去掉滚动条。接下来，我将通过一个流程帮助小白了解如何在iOS H5页面中去掉滚动条。
流程步骤



步骤
描述




1
创建一个新项目或打开现有项目


2
查找并编辑CSS文件


3
在...

			
		

	





	

		

			

				
					
ios端隐藏滚动条

				
			

			

				

					一枚不断学习的小码农一枚~
				

				

					09-23
					
					2463
					
				

			

		

		

			
				
子元素
 	padding-bottom: 60px;// 滚动条向下移，外层盒子给定高overflow:hidden，解决ios无法隐藏滚动条问题
   box-sizing: border-box;
   overflow-x: scroll;
   /*解决ios上滑动不流畅*/
   -webkit-overflow-scrolling: touch;
   /*纵向超出部分将会隐藏，即滚动条部分被挤出可视区域*/
   overflow-y: hidden;
   scrollbar-width:

			
		

	





	

		

			

				
					
解决ios系统h5页面滚动条问题

					
热门推荐

				
			

			

				

					weixin_38958405的博客
				

				

					03-08
					
					1万+
					
				

			

		

		

			
				
需求：页面在各种手机端可以正常横向滚动

问题：（以下所有效果均针对ios系统下的，安卓是不存在这个问题的）

1、第一次用基础css实现滚动：overflow：scroll；效果：可以滑动，但是页面滚动起来非常卡，没有回弹顺滑的效果，手指一停，页面就停住了。

2、第二次网上搜方法解决了滑动很卡的现象，给很宽的那个容器加上了css属性：-webkit-overflow-scrolling：tou...

			
		

	





	

		

			

				
					
ios的h5弹起键盘时有两个滚动条

				
			

			

				

					weixin_40517189的博客
				

				

					08-16
					
					560
					
				

			

		

		

			
				
iOS的H5弹起键盘时有两个滚动条问题分析
在iOS的Web应用开发中，当用户在H5页面中输入文本时，通常会弹起屏幕上的虚拟键盘。这一过程有时会引发奇怪的排版问题，其中最常见的就是出现两个滚动条的现象。这不仅影响了用户的体验，还可能导致用户无法完全查看网页内容。本文将解析这一问题的成因，并提供一些解决方案和代码示例。
问题...

			
		

	





	

		

			

				
					
h5如何隐藏横滑滚动条

				
			

			

				

					风烟
				

				

					01-11
					
					1528
					
				

			

		

		

			
				
在移动端隐藏使用
 ::-webkit-scrollbar {
       width: 0px;
 }

即可



			
		

	





	

		

			

				
					
手机端html去掉滚轮,纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

				
			

			

				

					weixin_34327800的博客
				

				

					06-26
					
					1157
					
				

			

		

		

			
				
html代码展示(直接复制代码保存至本地文件运行即可)：移动端隐藏滚动条解决方案* {padding: 0;margin: 0;}.container {height: 50px;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.nav {height: 100%;overflow-x: scroll;...

			
		

	





	

		

			

				
					
html ios 滚动条隐藏,CSS溢出滚动和隐藏滚动条（iOS）

				
			

			

				

					weixin_29061531的博客
				

				

					06-03
					
					835
					
				

			

		

		

			
				
6 个答案:答案 0 :(得分：5)我只是玩了这个codepen(https://codepen.io/devstreak/pen/dMYgeO)，看来如果你为下面的所有三个属性设置background-color到transparent，滚动(在这个例子中)同时删除box-shadow s)，根本看不到滚动条：#style-1::-webkit-scrollbar-track{//  -webk...

			
		

	





	

		

			

				
					
uni app  h5优化页面滚动条

					
最新发布

				
			

			

				

					03-21
				

			

		

		

			
				
<think>嗯，用户想优化Uni App在H5平台上的页面滚动条表现。首先，我需要回忆一下之前看到的引用内容。引用[1]提到了隐藏scroll-view滚动条的方法，比如在公共CSS里设置body和uni-scroll-view的滚动条为none，还有overflow-x:hidden。引用[2]则讨论了让滚动条一直显示的问题，和::-webkit-scrollbar样式有关。引用[3]提到在iOS上去掉滚动条需要同时设置display:none和width:0。

首先，用户可能遇到了滚动条显示不一致的问题，比如在H5和App端表现不同。需要分情况处理，可能要用条件编译。比如在H5平台下应用特定的CSS样式，而在App端用不同的方法。

然后，隐藏原生滚动条的话，可能需要使用::-webkit-scrollbar伪类，设置display:none和width:0，特别是针对iOS。同时，要注意兼容性，可能需要加上-webkit-overflow-scrolling:touch来保持滚动流畅。

接下来，自定义滚动条样式。用户可能希望滚动条在滚动时出现，或者保持美观。可以用::-webkit-scrollbar-thumb和track来调整颜色和形状。但要注意，这只在WebKit内核浏览器有效，其他浏览器可能需要JS插件。

性能优化方面，滚动条处理可能影响渲染性能。使用transform代替top/left属性，减少重绘。另外，防抖和节流函数可以优化滚动事件的处理，避免频繁触发导致卡顿。

对于scroll-view组件，要合理使用scroll-y和scroll-x属性，避免不必要的滚动容器。动态加载数据时，分页加载可以提升性能，减少DOM节点数量。

另外，可能需要处理iOS的弹性滚动效果，通过设置-webkit-overflow-scrolling:auto来禁用，或者调整overscroll-behavior属性防止页面整体滚动。

最后，注意不同平台的差异，使用条件编译来区分H5和其他平台，比如在App.vue里使用#ifdef H5来应用特定样式。同时测试不同设备和浏览器，确保兼容性。

用户可能需要具体的代码示例，比如如何在公共CSS中设置，如何条件编译，或者如何自定义滚动条样式。还要提醒他们测试的重要性，以及性能优化的权衡，比如隐藏滚动条可能影响用户体验，需要根据情况选择。</think># Uni App H5页面滚动条优化方法与性能分析

### 一、滚动条表现优化方案
1. **原生滚动条隐藏**
   - 通过CSS伪类隐藏浏览器默认滚动条：
     ```css
     /* 所有页面生效 */
     ::-webkit-scrollbar {
       display: none;
       width: 0;
       height: 0;
       background: transparent;
     }
     /* 单独处理scroll-view组件 */
     uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
       display: none
     }
     ```
     此方法兼容iOS/Android系统[^1][^3]

2. **自定义滚动条样式**
   ```css
   ::-webkit-scrollbar {
     width: 4px;
     background: #f5f5f5;
   }
   ::-webkit-scrollbar-thumb {
     background: #888;
     border-radius: 2px;
   }
   ::-webkit-scrollbar-track {
     background: #f1f1f1;
   }
   ```
   支持自定义颜色和形状，但需注意浏览器兼容性[^2]

3. **平台差异化处理**
   ```css
   /* 条件编译处理 */
   #ifdef H5
   body {
     -webkit-overflow-scrolling: touch;
   }
   #endif
   ```

### 二、性能优化建议
1. **渲染性能优化**
   - 避免使用`overflow:scroll`嵌套多层容器
   - 对滚动区域使用`transform`代替`top/left`定位
   - 启用GPU加速：
     ```css
     .scroll-area {
       will-change: transform;
       backface-visibility: hidden;
     }
     ```

2. **滚动事件优化**
   ```javascript
   // 使用防抖/节流函数
   const handleScroll = _.throttle((e) => {
     // 业务逻辑
   }, 200)
   ```

3. **scroll-view优化**
   - 设置`scroll-y`/`scroll-x`明确滚动方向
   - 启用`enable-back-to-top`属性（iOS专属优化）
   - 分页加载数据时使用`<scroll-view @scrolltolower="loadMore">`

### 三、特殊场景处理
1. **iOS弹性滚动控制**
   ```css
   body {
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: auto;
   }
   ```

2. **动态显隐优化**
   ```javascript
   // 滚动时显示/隐藏滚动条
   let timer = null
   window.addEventListener(&#39;scroll&#39;, () => {
     document.body.classList.add(&#39;show-scrollbar&#39;)
     clearTimeout(timer)
     timer = setTimeout(() => {
       document.body.classList.remove(&#39;show-scrollbar&#39;)
     }, 1000)
   })
   ```

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值