Heim > Fragen und Antworten > Hauptteil
P粉8141609882023-08-31 19:12:30
对于这个问题,我认为唯一的解决方案是制作一个自定义滚动条(如果必须将图像放在视口上方)
这是我根据您的代码制作的代码
let stopDrag = false;
const mouse = {}
document.addEventListener('mousemove', (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
})
document.getElementsByClassName('scrollbar')[0].addEventListener('mousedown', startDrag)
document.getElementsByClassName('drag')[0].addEventListener('mousedown',startDrag)
document.addEventListener('mouseup', () => {
stopDrag = true;
})
function startDrag() {
stopDrag = false;
let interval = setInterval(() => {
if(mouse.y+180 > 495) {
document.getElementsByClassName('drag')[0].style.top ="495px";
} else
if(mouse.y+180 <217) {
document.getElementsByClassName('drag')[0].style.top ="0px";
}
else
{
document.getElementsByClassName('drag')[0].style.top = mouse.y+(180 + ((Number(document.getElementsByClassName('drag')[0].style.top.split("p")[0]) -760)/3.5));
}
document.getElementsByClassName('window')[0].style.bottom = (Number(document.getElementsByClassName('drag')[0].style.top.split("p")[0]) -760) + "px"
if(stopDrag) {
clearInterval(interval)
}
})
}
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 500;
}
.main-content {
display: flex;
width: 100%;
height: 100%;
overflow: auto;
margin: auto;
}
.window {
/*height: 16vw;
width: 27vw;*/
display: flex;
height: 550px;
width: 800px;
position: absolute;
top: 50%;
left: 50%;
border: solid blue 5px;
background-color: black;
margin: auto;
overflow: hidden;
}
.scrollbar {
height: 100%;
width: 2%;
position: fixed;
top: 0%;
right: 10%;
z-index: 3;
background: white;
}
.scrollbar .drag {
background: darkgray;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10%;
}
.scrollbar .drag:hover {
background: grey;
}
<div class="container">
<div class="main-content">
<div class="window" id="window1" style="transform: translate(-10%, -90%);">
<div class="header" id="window-header">
<img src="https://picsum.photos/800/550">
<div class="scrollbar">
<div class="drag" draggable = false></div>
</div>
<p class="title">navigation</p>
</div>
</div>
</div>
</div>
基本上,我使用HTML和CSS制作了一个滚动条,并将其放置在图像的最右侧
希望HTML和CSS能够理解 现在,让我们来看看JavaScript部分
首先,我们映射鼠标坐标
const mouse = {} document.addEventListener('mousemove', (e) => { mouse.x = e.clientX; mouse.y = e.clientY; })
我们创建调用函数或更改stop drag变量的事件监听器
let stopDrag = false; document.getElementsByClassName('scrollbar')[0].addEventListener('mousedown', startDrag) document.getElementsByClassName('drag')[0].addEventListener('mousedown',startDrag) document.addEventListener('mouseup', () => { stopDrag = true; })
然后我们创建startDrag()函数
function startDrag() { stopDrag = false; let interval = setInterval(() => { if(mouse.y+180 > 495) { document.getElementsByClassName('drag')[0].style.top ="495px"; } else if(mouse.y+180 <217) { document.getElementsByClassName('drag')[0].style.top ="0px"; } else { document.getElementsByClassName('drag')[0].style.top = mouse.y+(180 + ((Number(document.getElementsByClassName('drag')[0].style.top.split("p")[0]) -760)/3.5)); } document.getElementsByClassName('window')[0].style.bottom = (Number(document.getElementsByClassName('drag')[0].style.top.split("p")[0]) -760) + "px" if(stopDrag) { clearInterval(interval) } }) }
在这个函数中,首先我们将stopdrag设置为false,因为用户当前正在拖动滚动条 然后我们设置一个间隔循环代码 根据坐标,mouse.y大部分是试错 我们检查它是否在限制范围内,如果是,我们重新定位 然后我们在拖动时更改滚动条的顶部位置(计算是试错的) 然后我们更改window类div的底部位置来重新定位window类div(因为图像本身无法重新定位;如果您不希望整个window类div移动,可以在其上创建另一个容器)以查看它 如果拖动停止,我们清除间隔
P粉2918868422023-08-31 00:33:50
感谢@TylerH解决了这个问题。问题出在我的HTML中的transform样式上。删除它后,它可以正确滚动。从我看到的情况来看,它似乎会偏移滚动,并且好像是移动整个页面而不仅仅是元素。感谢大家的帮助,但我已经解决了。