I have a problem. I have a div, called container, which is my main scrolling container, and inside, I have a few pages. On the first page, is my logo (in the aspect ratio 4.37:1), but when I scroll over my logo (I position the scroll wheel over it), it doesn’t scroll. I’m not using an <img> element as I need to have it change using the @media (orientation: portrait), but I’ve sorted that out
Why is the nested div homelogo blocking scrolling for the (2x) parent container?
<body>
<div id="container" class="container">
<div id="logoscreen"><div id="navbar"></div><div id="homelogo"></div>
</div>
<div style="text-align: center; font-size: 100px; background-color: white;">2nd Page</div>
</body>
body {
padding: 0;
margin: 0;
font-family: sans-serif;
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
overflow-x: hidden;
scroll-padding-top: 7.5vh;
flex-basis: 100vw;
height: 100%;
overflow-y: scroll;
}
#logoscreen {background-color: black;}
.container > div {
height: 92.5vh;
width: 100vw;
}
#navbar {
position: fixed;
width: 100vw;
height: 7.5vh;
top: 0px;
transform: translate(-50%, 0);
background-color: rgb(0, 0, 0);
top: 0;
left: 50%;
}
#homelogo {
overflow: hidden;
display: flex;
position: fixed;
transform: translate(-50%, -20%);
transform-origin: 50% 50%;
background-size: contain;
background-color: white;
background-image: url(images/logo.png);
}
#homelogo:is(.top) {
top: 0.25vw;
left: 50vw;
width: 45vh;
height: calc(45vh/4.37);
}
#homelogo:not(.top) {
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
max-width: 100vw;
max-height: 100vh;
width: min(300vh, 100vw);
height: calc(min(300vh, 100vw)/4.37);
}
Why is the nested div homelogo blocking scrolling for the (2x) parent container?