在移动端浏览器上怎么实现当页面向上和向下滑动时隐藏

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在移动端浏览器上怎么实现当页面向上和向下滑动时隐藏相关的知识,希望对你有一定的参考价值。

参考技术A 一段行代码解决了问题,
$(function()
$(window).bind('scroll', function()
var len = $(this).scrollTop()
if (len >= ***px)
$('#yourdiv').show();
else
$('#yourdiv').hide();

);

可以试试啊。

移动端判断手指向上滑动还是向下滑动

function GetSlideDirection(startX, startY, endX, endY) {  
      var dy = startY - endY;  
      //var dx = endX - startX;  
      var result = 0;
      if(dy>0) {//向上滑动
              result=1;
      }else{//向下滑动
              result=2;
      }

      return result;  
  } 

//滑动处理  
  var startX, startY;  
  document.addEventListener(‘touchstart‘,function (ev) {  
      startX = ev.touches[0].pageX;  
      startY = ev.touches[0].pageY;    
  }, false);  

  document.addEventListener(‘touchend‘,function (ev) {  
      var endX, endY;  
      endX = ev.changedTouches[0].pageX;  
      endY = ev.changedTouches[0].pageY;  
      var direction = GetSlideDirection(startX, startY, endX, endY);
      switch(direction) {  
          case 0:  
              break;  
          case 1:  
              // 向上
              alert("up");
              break;  
          case 2:  
              // 向下
             alert("down");
              break;  
        
          default:             
      }  
  }, false); 

以上是关于在移动端浏览器上怎么实现当页面向上和向下滑动时隐藏的主要内容,如果未能解决你的问题,请参考以下文章

移动端怎么用JS判断是手势是向上滑动还是向下滑动

移动端的一个js效果:手滑动向上向下滚动li标签

移动端在有弹出层时如何禁止底层的滚动 (实现表层滑动的时候,底层禁止滑动,表层隐藏的时候,底层依然可以滑动);

移动端body设置overflow:hidden失效与设置之后页面会向上滚动问题

移动端判断手指向上滑动还是向下滑动

js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏