watch(() => step.value, () => {
if (step.value === 4) {
nextTick(() => {
let dragging = false;
let position = null;
const drag = document.getElementById('drag');
const parent = document.getElementById('parent');
drag.addEventListener('mousedown', function (e) {
dragging = true;
position = [e.clientX, e.clientY];
});
drag.addEventListener('mousemove', function (e) {
if (dragging === false) {
return;
}
const x = e.clientX;
const y = e.clientY;
const deltaY = y - position[1];
let top = parseInt(drag.style.top || 100);
if (top<-120) {
top = -120;
} else if (top>0){
top = 0;
}
drag.style.top = `${top + deltaY }px`;
position = [x, y];
parent.scrollTop = -top; // 设置父元素的scrollTop属性
});
document.addEventListener('mouseup', function (e) {
dragging = false;
});
});
}
}, {deep: true, immediate: true});
上下滑动展示超出区域,滚动条随之变化
最新推荐文章于 2024-07-04 16:37:43 发布