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元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
h5 隐藏滚动条

				
			

			

				

					拥抱AI Design
				

				

					08-13
					
					9335
					
				

			

		

		

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

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


...

			
		

	



                

            
              



	

		

			

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

				
			

			

				

					江拥羡橙的博客
				

				

					12-02
					
					1225
					
				

			

		

		

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

			
		

	



              


  
              

                


	

		

			

				
					
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;




			
		

	





	

		

			

				
					
在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组件之一。滚动条和进度条可以用来显示进度、进度、评分等信息，今天我们将详细介绍如何自定义水平滚动条和进度条。  首先，...

			
		

	





	

		

			

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

				
			

			

				

					weixin_39860123的博客
				

				

					11-12
					
					625
					
				

			

		

		

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

			
		

	





	

		

			

				
					
h5 可以滚动并隐藏滚动条

				
			

			

				

					Yipitre的博客
				

				

					11-22
					
					1766
					
				

			

		

		

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






			
		

	





	

		

			

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

				
			

			

				

					weixin_30649859的博客
				

				

					09-22
					
					603
					
				

			

		

		

			
				
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
				

			

		

		

			
				
嗯，用户想优化Uni App在H5平台上的页面滚动条表现。首先，我需要回忆一下之前看到的引用内容。引用[1]提到了隐藏scroll-view滚动条的方法，比如在公共CSS里设置body和uni-scroll-view的滚动条为none，还有overflow-...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值