iScroll 左右滑动的时候，阻止上下滑动e.preventDefault()

最新推荐文章于 2021-06-07 12:21:26 发布
最新推荐文章于 2021-06-07 12:21:26 发布
阅读量861 收藏
点赞数
分类专栏： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sfkong31893189/article/details/84241749
版权 

 

scroll.js 触屏手机 滚动效果代码库！
 

很不错的一个框架！不过此框架会阻止浏览器的默认行为，如左右滑动的时候，这个时候会阻止上下滑动
 

这样对很多文章内容页相对较长的页面显然不适用，修改如下
 

1:在onBeforeScrollStart: function (e) { e.preventDefault(); }, 修改为onBeforeScrollStart: null,
 

2:在_move方法里增加
 

if(newY>=-10 && newY<=10){e.preventDefault();}
 

3.lockDirection  设置为true

                

        

        




    




    

      

        

            

              
                
                  sfkong31893189
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
html js 禁用浏览器上下滑动,原生javascript实现禁止浏览器滚动,滚动条不消失代码...

				
			

			

				

					weixin_35739886的博客
				

				

					06-10
					
					1441
					
				

			

		

		

			
				
使用css代码可以禁止网页滚动，但是会使浏览器窗口的滚动条消失。而js代码则可以让页面禁止滚动的同时，保留滚动条的显示状态，而且滚动条的位置不变。javascript代码var keys = { 37: 1, 38: 1, 39: 1, 40: 1 };function preventDefault(e) {e = e || window.event;if (e.preventDefault)e....

			
		

	



                

              
                



	

		

			

				
					
swiper滑动-上下左右滑动结合

				
			

			

				

					05-19
				

			

		

		

			
				
swiper各种滑动demo，还有左右滑动中间嵌入上下滑动，代码简介，案例多，种类全，之后在我的博客里，也会有些swiper滑动使用得介绍(加入动画,左右滑动嵌入上下滑动)

			
		

	



                


  
              

                


	

		

			

				
					
页面左右滑时，如何防止页面上下滑动

				
			

			

				

					u011461327的博客
				

				

					11-22
					
					8350
					
				

			

		

		

			
				
最近，做了一个项目，需要在手机端用H5写一个程序模仿苹果手机原生的左右菜单，如下图：



简单实现了功能后，发现手机端运行时会遇到一个问题，当我手指进行左右滑动菜单时，除非手指水平滑动，否则会造成屏幕上下滑动。仔细研究后，发现是由于手指不能保证水平滑动，因此在滑动时，会有一定的误差，导致屏幕认为手指进行了上下滑动的操作。因此解决办法如下：

1）在touchstart处，记录targetTouc...

			
		

	





	

		

			

				
					
手机上下左右滑动html,iScroll.js 手机 上下左右菜单滑动 问题

				
			

			

				

					weixin_32080327的博客
				

				

					06-07
					
					398
					
				

			

		

		

			
				
iScroll.js 手机 上下左右菜单滑动 问题首先下载下载iScroll.js百度搜索iScroll.js，或者从这里下载http://pan.baidu.com/s/1bntS73x第一：引入 iscroll.js，这个不用多说把第二：主要代码:编写规范的html格式只有如下格式才能实现滑动效果这个区域可以滑动如下格式不能滑动这个区域可以滑动这个区域不可以滑动了只有wrapper的第一个子...

			
		

	



		

			
		



	

		

			

				
					
iscroll实现上下左右滚动的方法

				
			

			

				

					wenqingzzz的专栏
				

				

					05-16
					
					1148
					
				

			

		

		

			
				
1.iscorrl.js 修改参数 lockDirection=false
2.在iscroll.js文件，找到 


           onBeforeScrollStart: function (e) { e.preventDefault(); },改成

onBeforeScrollStart:null,

			
		

	





	

		

			

				
					
jquery-iscroll.js鼠标控制ul左右滑动

				
			

			

				

					12-31
				

			

		

		

			
				
当我们将jQuery与iScroll.js结合使用时，可以创建出平滑、响应式的滚动体验，比如在网页上用鼠标或触摸事件控制`<ul>`列表左右滑动。  首先，`jquery-iscroll.js`是将jQuery与iScroll功能整合的一个插件，它允许...

			
		

	





	

		

			

				
					
jQuery上下滑动加载刷新插件iscroll.js

				
			

			

				

					04-27
				

			

		

		

			
				
**jQuery上下滑动加载刷新插件iscroll.js详解**  在Web开发中，用户界面的流畅性和交互性至关重要，iscroll.js就是这样一款强大的JavaScript插件，它使得开发者能够轻松实现页面内容的上下滑动加载和刷新功能，极大...

			
		

	





	

		

			

				
					
js实现移动端导航点击自动滑动效果

				
			

			

				

					10-19
				

			

		

		

			
				
6. **优化**：为了改善在PC端模拟的手机屏幕上的滑动体验，阻止`touchmove`事件的默认行为，以防止不必要的卡顿。  7. **回调函数**：`endClickScroll` 是一个可选的回调函数，可以在导航项切换后执行，用于自定义...

			
		

	





	

		

			

				
					
iscroll.zip

				
			

			

				

					10-26
				

			

		

		

			
				
3. **可配置选项**：iscroll.js提供了丰富的配置参数，如bounceTime（回弹时间）、momentum（动量滚动）、preventDefault（阻止默认事件）等，可以根据项目的具体需求进行定制。  4. **滚动范围控制**：iscroll.js...

			
		

	





	

		

			

				
					
iscroll上拉下滑加载数据效果-wap

				
			

			

				

					11-05
				

			

		

		

			
				
在移动Web开发中，iscroll是一个非常流行的JavaScript库，它提供了平滑的滚动效果，尤其在处理触摸设备上的滚动事件时。在这个场景中，我们看到iscroll被用来实现上拉和下拉加载更多的数据，这在浏览列表或者无限...

			
		

	





	

		

			

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

				
			

			

				

					yutao的博客
				

				

					02-15
					
					1565
					
				

			

		

		

			
				
1 前言
移动端网页，发现ios平台的iphone或者ipad，网页可以上下左右移动，而Android版则不会。仅作为记录使用。
2 代码

```javascript
var mo=function(e){e.preventDefault();};
function stop(){
        document.body.style.overflow='hidden';       
   ...

			
		

	





	

		

			

				
					
解决iscroll5的上拉下拉的回弹问题

				
			

			

				

					zuo-yiran的博客
				

				

					08-23
					
					4556
					
				

			

		

		

			
				
    一般在项目的列表页中，经常会用到上拉加载下拉刷新这样的效果。一般加载的数据足够多的时候，用iscroll是可以实现这个没有问题，但是当数据少的时候，占不满一屏，如何用iscroll实现如下回弹效果。




    只需加上一句：




    min-height: 101%;

就行了。 
另网友建议的方法：



height:calc(100% + 1px);// 不管屏幕多高，...

			
		

	





	

		

			

				
					
如何使用iscrool滚动插件

				
			

			

				

					李大元的个人博客
				

				

					11-09
					
					330
					
				

			

		

		

			
				
在使用IScroll.js必须要有3层元素嵌套，如：


			1

			2

			3

			4

			5

			6

			7
			
			
			&lt;div class="food-left"&gt;

			    &lt;ul class="food-nav"&gt;

			        &lt;li&gt;&lt;/li&gt;

			        &lt;li&

			
		

	





	

		

			

				
					
阻止H5左右滑动，保留上下滑动

				
			

			

				

					Front-End严黑C的博客
				

				

					05-28
					
					3858
					
				

			

		

		

			
				
let startX,startY;

document.addEventListener("touchstart",function(e){

  startX = e.touches[0].pageX;

  startY = e.touches[0].pageY;

});

document.addEventListener("touchmove",function(e){

 ...

			
		

	





	

		

			

				
					
Unable to preventDefault inside passive event listener

				
			

			

				

					weixin_42390878的博客
				

				

					08-27
					
					3235
					
				

			

		

		

			
				
https://www.jianshu.com/p/04bf173826aa

“我的”页面和两个列表页的滚动出现了问题，滚动时候不仅滚动了希望滚动的部分，整体的页面也跟随者上下滚动，整个页面非常卡顿。

解决办法1：

在touch的事件监听方法上绑定第三个参数{ passive: false }，
通过传递 passive 为 false 来明确告诉浏览器：事件处理程序调用 preventDe...

			
		

	





	

		

			

				
					
iScroll局部使用，使浏览器滑动失效

				
			

			

				

					我给媳妇儿讲java
				

				

					03-30
					
					6346
					
				

			

		

		

			
				
原文iScroll 是非常常用的一个开发移动版页面的插件，但是在使用过程中我们发现如果在页面的局部区域使用了iScroll，那么在这个区域不管怎么滑动，iScroll区域可以滑动但是整个页面却是不会滑动了的，查看源码可以发现iScroll的bug所在Default options中onBeforeScrollStart: function (e) { e.preventDefault(); },问题

			
		

	





	

		

			

				
					
移动端块级标签左右滑动

					
最新发布

				
			

			

				

					09-14
				

			

		

		

			
				
2. 使用JavaScript库：可以使用一些移动端专用的JavaScript库，如TouchSwipe、iScroll等来实现左右滑动效果。这些库提供了一些简化的API和事件，方便开发者快速实现移动端滑动效果。  3. 使用HTML5的touch事件：通过...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值