用鼠标滚动页面

Question

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

页面将在此过程后，立即打开网页打开名称

我试图用 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>

Answer 1

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

问题已在这里回答：

在 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; };