我使用固定在 上的位置，#zoom-controls因此当我滚动时它button会停留在屏幕顶部。在我添加position: fixed到之前div，按钮工作，但如果我添加position: fixed变得button没有反应。在 fiddlejs 上玩过之后，我发现如果你删除svgbuttons div 的兄弟，即使 div 是固定的，按钮也能工作。我需要svg留下来。svg这是带有 - 的代码，position: fixed所以它不起作用：var butt = document.getElementById('zoom_in');butt.addEventListener('click', () => { var body = document.getElementById('body'); var p = document.createElement('p'); p.textContent = 'pressed'; body.appendChild(p);});.draggable { cursor: move;}.pdf-page-canvas { display: block; margin: 5px auto; border: 1px solid rgba(0, 0, 0, 0.2); z-index: 0;}.canvas_container { width: 100%; /* height: 100%; */ z-index: 0; position: absolute;}#svg { position: absolute; z-index: 1;}<!DOCTYPE html><html><head> <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script></head><body id="body"> <div id="zoom-controls" style='position:fixed'> <button id="zoom_in">+</button> </div> <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" preserveAspectRatio="none"></svg></body></html>
1 回答
斯蒂芬大帝
TA贡献1827条经验 获得超8个赞
您的按钮容器位于所有内容下方。添加z-index到它，它将起作用。
.draggable {
cursor: move;
}
.pdf-page-canvas {
display: block;
margin: 5px auto;
border: 1px solid rgba(0, 0, 0, 0.2);
z-index: 0;
}
.canvas_container {
width: 100%;
/* height: 100%; */
z-index: 0;
position: absolute;
}
#zoom-controls {
z-index: 3;
}
#svg {
position: absolute;
z-index: 1;
}
<body>
<div id="zoom-controls" style='position:fixed'>
<button id="zoom_in">+</button>
</div>
<svg id='svg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" preserveAspectRatio="none"></svg>
</body>
添加回答
举报
0/150
提交
取消