作者:fvcvb_974 | 来源:互联网 | 2023-05-19 13:36
I have a canvas in my app that doesn't scroll like I'd expect. I'm trying to make a sports tournament bracket so I'd like to have a DOM structure then overlay a canvas on it to connect the different matchups. Works great until I have to scroll and the canvas acts like it's position: fixed
. Maybe this is some sort of flex bug or I'm doing something silly. I'd expect the diagonal line to scroll with the text. What is causing this behavior?
我的应用程序中有一个画布,不像我期望的那样滚动。我正在尝试制作一个体育锦标赛支架,所以我想要一个DOM结构然后在它上面覆盖画布以连接不同的对战。工作得很好,直到我必须滚动,画布就像它的位置:固定。也许这是某种灵活的错误,或者我正在做一些愚蠢的事情。我希望对角线与文本一起滚动。是什么导致了这种行为?
const c = document.getElementById('canvas');
const ctx = c.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(200, 200);
ctx.stroke();
.app-container {
display: flex;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.app-nav-bar {
flex: 0 0 230px;
border: 1px solid #aaa;
background: #eef1f7 no-repeat 0 100%;
position: absolute;
top: 0;
bottom: 0;
width: 200px;
}
.header-and-body {
width: 100%;
display: flex;
flex-flow: column;
margin-left: 200px;
}
.app-header {
flex: 0 0 45px;
border: 1px solid #aaa;
}
.main-view-container {
display: flex;
height: 100%;
overflow-y: auto;
}
.tournament-container {
margin-left: 20px;
}
canvas {
position: absolute;
z-index: -1;
}
.contents {
height: 1000px;
width: 1000px;
}
Navs
Here are my contents
Some other stuff
This should scroll
1 个解决方案