pc端和手机端禁用滚动条

最新推荐文章于 2023-03-09 14:28:48 发布
最新推荐文章于 2023-03-09 14:28:48 发布
阅读量2.2k 收藏 1
点赞数
文章标签： 禁用滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_yq/article/details/78616981
版权
pc端：
禁止出现滚动条
html,body{overflow:hidden;overflow-y:auto;}
禁止纵向滚动条
<body style="overflow:scroll;overflow-y:hidden"> 


禁止横向滚动条
<body style="overflow:scroll;overflow-y:hidden">
overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容


overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条
 

移动设备：
 

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />

viewport可以控制用户在手机上两个手指缩放的行为范围，这行代码的意思是宽度为设备宽度，初始缩放为1，最大缩放也是1倍，用户不能缩放。
apple这行是告诉iOS这是个应用，就不会像网页一样可以滚动到顶部回弹一下的效果


                

        

        

    




    

      

        

            

              
                
                  Mr_yq
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
移动端禁止滚动条

				
			

			

				

					01-30
				

			

		

		

			
				
我们移动端开发时常遇到有弹窗时滚动条还能滚动，这个方法可以教你如何禁止滚动条，直接调用方法就行。

			
		

	



                

              
                



	

		

			

				
					
手机端页面出现横向滚动条，禁止方法

				
			

			

				

					weixin_30457065的博客
				

				

					11-16
					
					1002
					
				

			

		

		

			
				
html,body{overflow:hidden;overflow-y:auto;}
转载于:https://www.cnblogs.com/init-007/p/9968566.html

			
		

	



                


  
              

                


	

		

			

				
					
PC端/移动端如何禁止底层页面滚动

				
			

			

				

					Aubrey's blog
				

				

					04-04
					
					3284
					
				

			

		

		

			
				
今天在写一个首页，移动端底部有个导航按钮，导航里的选项只有在点击导航按钮时才会以弹出层/遮罩层的方式显示。如下图所示：用js和css3写完动画后，在PC上的chrome浏览器里测试手机的效果时，没有问题，鼠标拖动/滚动，遮罩层底下的body可以滚动。但是拿手机真机测试时，出现以下问题：Safiri/Andriod手机自带浏览器：遮罩层显示后，手指滑动屏幕，浏览器底部自带的导航栏会自动隐藏，遮罩层就...

			
		

	





	

		

			

				
					
移动端去除水平滚动条

				
			

			

				

					qq_29715077的博客
				

				

					05-15
					
					1255
					
				

			

		

		

			
				
有时候，明明在css中设置了去除水平滚动条，body{ background-color:#EAEAEF;font-size: 16px;overflow:scroll;overflow-x:hidden;min-width: 320px;}但是在移动端底部还是出现了滚动条。这时我们要在html的header中设置：&lt;meta content="width=device-width,mini...

			
		

	



		

			
		



	

		

			

				
					
PC端滚动条插件

				
			

			

				

					08-05
				

			

		

		

			
				
原生js滚动条插件，使用方便灵活，自带样式，也可修改样式

			
		

	





	

		

			

				
					
网站禁止PC端访问代码 手机端访问

				
			

			

				

					07-12
				

			

		

		

			
				
js限制网页只在手机端中打开，网站屏蔽PC端访问JS代码，网站只允许手机端访问。  if(window.screen.width==0){window.location.replace("https://www.zxki.cn")}; var system={win:false,mac:false,xll:false}; var ...

			
		

	





	

		

			

				
					
限制电脑PC端访问Web页面，只能手机端才能访问

				
			

			

				

					10-31
				

			

		

		

			
				
标题 "限制电脑PC端访问Web页面，只能手机端才能访问" 涉及到的是一个网站访问策略，这种策略通常用于实现移动优先的用户体验或者特定的业务需求。它通过技术手段来检测用户设备类型，当检测到访问者是PC端时，会...

			
		

	





	

		

			

				
					
jQuery手机端日期和时间特效

				
			

			

				

					06-24
				

			

		

		

			
				
"jQuery手机端日期和时间特效"就是一个专门针对这种情况设计的插件，它能够帮助开发者在手机和平板等移动设备上创建出优雅、易用的日期和时间选择功能。  这个插件的首要特点就是它的跨平台兼容性，不仅能在桌面...

			
		

	





	

		

			

				
					
PC 端wo麦克风和驱动.rar

				
			

			

				

					10-20
				

			

		

		

			
				
"PC 端wo麦克风和驱动.rar"这个压缩包文件可能包含了关于如何在Windows操作系统上设置和优化麦克风，以及解决相关驱动问题的详细资料。下面，我们将深入探讨PC端麦克风和驱动的相关知识点。  1. **麦克风基础知识**...

			
		

	





	

		

			

				
					
兼容手机端和pc端的选择时间插件.zip

				
			

			

				

					06-07
				

			

		

		

			
				
"兼容手机端和PC端的选择时间插件"是一个旨在提高用户友好性的工具，它允许用户在多种设备上方便地选取时间，无论是桌面电脑还是移动设备。这个插件的核心目标是提供跨平台的兼容性，确保在不同设备上的视觉一致性...

			
		

	





	

		

			

				
					
h5页面去除滚动条

				
			

			

				

					weixin_43958085的博客
				

				

					11-11
					
					3083
					
				

			

		

		

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



			
		

	





	

		

			

				
					
移动端overflow:hidden出现不兼容

				
			

			

				

					bingkingboy的博客
				

				

					11-03
					
					5913
					
				

			

		

		

			
				
禁止页面滚动：body{style="overflow：hidden;"} 
可以实现大部分超出页面禁止滚动，可并非兼容所有移动手机。

document.body.addEventListener('touchmove',function(event){
    event.preventDefault();
},false);


PC端禁止键盘上下键

var move=fu

			
		

	





	

		

			

				
					
css修改浏览器默认滚动条样式

				
			

			

				

					qq_44417271的博客
				

				

					05-25
					
					1032
					
				

			

		

		

			
				
/*滚动条样式*/
::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-track {
  -webkit-box-s.

			
		

	





	

		

			

				
					
vue中vant滑动单元格组件踩坑记录

					
热门推荐

				
			

			

				

					weixin_42790916的博客
				

				

					04-11
					
					1万+
					
				

			

		

		

			
				
移动端项目中用vant组件感觉还是不错的 但是今天在调用vant的滑动单元格组件实现类似于微信聊天列表的左滑删除功能时因为业务需求 还有自己的技术水平的缘故 常在河边走 哪有不湿鞋
主要实现的功能就是 渲染出一个类似微信聊天列表的页面 这个页面可以上拉加载下拉刷新 然后这个页面的每个列表都可以左滑删除 同时每个列表还可以点击进入详情页 我就是实现了左滑出现删除按钮 但是随意再次点击列表应该是删除按...

			
		

	





	

		

			

				
					
页面去掉横竖滚动条

				
			

			

				

					
				

				

					06-29
					
					4070
					
				

			

		

		

			
				
body {
     overflow-x : hidden;   去掉横条
     overflow-y : hidden;   去掉竖条
}

			
		

	





	

		

			

				
					
移动端禁止页面滚动，超简单的方法

				
			

			

				

					XiaoSen207的博客
				

				

					03-09
					
					1505
					
				

			

		

		

			
				
一分钟解决移动端禁止页面滚动，超简单的方法

			
		

	





	

		

			

				
					
web页面移动端滚动失效问题

				
			

			

				

					Amandam2018的博客
				

				

					07-02
					
					2544
					
				

			

		

		

			
				
项目背景：Angular7 + echarts 4.8.0 开发的web项目。有一个全是由各种图表组成的页面，在android10系统的手机上访问页面时，发现滑动界面不能正常的向下滚动，只有滑动非图表区域的地方，才能滚动。但是在pc端和ios系统的手机,以及android5.1系统的手机上。页面滚动时没有问题的。

一开始以为是android版本的兼容性问题，后来又查了很多资料说是echarts的问题。最后经过我两天的研究，在渲染echarts的div元素外面再包一层div标签。并设置样式为style=".

			
		

	





	

		

			

				
					
javascript移动端禁止页面滑动的解决方案

				
			

			

				

					啊猿的博客
				

				

					05-27
					
					3914
					
				

			

		

		

			
				
1 前言
移动端网页，发现ios平台的iphone或者ipad，网页可以上下左右移动，而Android版则不会。仅作为记录使用。
var mo=function(e){e.preventDefault();};
function stop(){
        document.body.style.overflow=‘hidden‘;        
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
}
//直接默认不让滑动


			
		

	





	

		

			

				
					
pc端页面怎么在手机端强制全屏显示

					
最新发布

				
			

			

				

					06-10
				

			

		

		

			
				
您可以使用以下代码将PC端页面强制全屏显示在移动设备上：

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

该代码设置了移动设备的视口宽度为设备的宽度，并禁用了用户缩放页面的能力，从而将页面强制全屏显示。同时，您还可以使用CSS媒体查询来调整页面布局，以更好地适应移动设备的屏幕大小。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值