如何实现鼠标拖拽底部按钮上滑解锁锁屏并打开指定新页面

需求说明 #

• 交互逻辑：鼠标点击屏幕底部解锁条并向上拖拽时，关闭锁屏界面，加载打开新页面
• 操作完成后打开的目标页面为 Page to open
• 原实现尝试通过mouseup、mousedown事件实现该功能，未达到预期效果

原有代码 #

CSS 代码 #

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

HTML 代码 #

<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>

补充实现代码 #

在原有代码基础上新增以下JavaScript代码即可实现需求，逻辑为监听拖拽的按下、移动、松开三个阶段，判断上滑距离是否达到解锁阈值，满足条件则打开目标页面：

const unlockBar = document.querySelector('.unlockBar');
const phoneContainer = document.querySelector('.Phone-container');
const targetPage = document.querySelector('.Page.to.open');

// 初始化目标页面样式，默认隐藏在屏幕下方
targetPage.style.cssText = `
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transition: top 0.3s ease;
`;

let isDragging = false;
let startY = 0;
const unlockThreshold = 100; // 上滑距离超过100px即触发解锁

// 监听解锁条按下事件，标记拖拽开始
unlockBar.addEventListener('mousedown', (e) => {
  isDragging = true;
  startY = e.clientY;
  unlockBar.style.cursor = 'grabbing';
  e.preventDefault();
});

// 监听全局鼠标移动事件，拖拽时同步页面偏移
document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const moveDistance = startY - e.clientY;
  if (moveDistance < 0) return;
  targetPage.style.top = `${Math.max(0, 100 - (moveDistance / phoneContainer.offsetHeight * 100))}%`;
});

// 监听全局鼠标松开事件，判断是否满足解锁条件
document.addEventListener('mouseup', (e) => {
  if (!isDragging) return;
  isDragging = false;
  const moveDistance = startY - e.clientY;
  
  if (moveDistance >= unlockThreshold) {
    targetPage.style.top = '0%';
    unlockBar.style.display = 'none'; // 解锁后隐藏解锁条
  } else {
    targetPage.style.top = '100%'; // 未达阈值，页面回弹复位
  }
});

内容的提问来源于stack exchange，提问作者RESTWELL