时间戳

首页 > 解决方案 > 用鼠标滚动页面

javascript - 用鼠标滚动页面

问题描述

当我用鼠标单击屏幕底部的按钮并将其向上拖动时，我希望关闭锁定屏幕并打开新页面。

在此过程之后将立即打开的页面的名称 要打开的页面

我试图用 mouseup 和 mousedown 来做，但没有成功 这是我想要做的功能的完整示例视频

可流式传输

.container {
  position: absolute;
  display: flex;
  right: 40px;
  bottom: 40px;
}

.Phone-container {
  position: absolute;
  width: 285px;
  height: 580px;
  border-radius: 30px;
  overflow: hidden;
}

.Phone-Background {
  background-image: url('https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/wallpaper.jpg?alt=media&token=059229cc-3823-4d27-834a-7b62cabd69d2');
  background-size: cover;
  background-repeat: no-repeat;
  right: 0;
  bottom: 0;
}

.unlockBar {
  position: absolute;
  width: 40%;
  height: 4px;
  border-radius: 20px;
  right: 30%;
  top: 565px;
  background-color: rgba(255, 255, 255, .7);
  opacity: 0;
  transition: ease all 0.2s;
  cursor: grab;
}

.Phone-container:hover .unlockBar {
  opacity: 1;
}

.Phone-container .unlockBar:hover:before {
  opacity: 1;
  transform: none;
}

.Phone-container .unlockBar::before {
  content: attr(data-msj);
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-width: 100px;
  margin: 0 auto;
  padding-bottom: 10px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  opacity: 0;
  transform: translateY(0px);
  transition: ease all .8s;
}
<div class="container">
  <div class="Phone-container Phone-Background">

    <div class="unlockBar" data-msj="Swipe Up to Open"></div>

    <div class="Page to open">
    </div>
  </div>
</div>

标签： javascripthtmlcssios

解决方案

您实际上需要检测滑动，在这种情况下滚动将不起作用。

问题已在此处得到解答：

在 iPhone 和 Android 上通过 JavaScript 检测手指滑动

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;                                                        

function handleTouchStart(evt) {                                         
    xDown = evt.originalEvent.touches[0].clientX;                                      
    yDown = evt.originalEvent.touches[0].clientY;                                      
};                                                

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.originalEvent.touches[0].clientX;                                    
    var yUp = evt.originalEvent.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            /* left swipe */ 
        } else {
            /* right swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* up swipe */ 
        } else { 
            /* down swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};

推荐阅读