I have a simple web page with text inside of a container. I’m trying to make the text scrollable (not the page – only the container). The scroll bar is showing but the scrolling effect doesn’t seem to be working. More info/details can be shared if needed, just ask! Any help is greatly appreciated!
Here’s the code:
.animation-div {
max-height: calc(100vh - 00px);
min-height: calc(100vh - 00px);
width: 100%;
overflow: hidden;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-color: #ffffff;
}
.background-svg {
position: absolute;
min-height: 100vh;
top: 0;
left: 0;
width: 100%;
}
.background-svg svg {
min-height: calc(100vh);
}
.title p {
height: 18px;
font-size: 18px;
text-decoration: none;
padding: 14px;
border-radius: 50px;
background-color: rgba(235, 235, 235, 0.8);
box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.2);
color: #000000;
border: none;
font-weight: 600;
letter-spacing: 0.5px;
font-family: arial;
}
.title {
position: absolute;
width: 60%;
text-align: center;
margin-left: 50%;
left: -30%;
top: 20px;
}
.other-page-text {
position: absolute;
width: 60%;
text-align: left;
margin-left: 50%;
left: -30%;
top: 85px;
margin-bottom: 20px;
}
.other-page-text div {
font-size: 14px;
height: calc(100vh - 170px);
padding: 30px 30px;
border-radius: 30px;
background-color: rgba(235, 235, 235, 0.8);
color: #000000;
box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.2);
letter-spacing: 1px;
overflow: scroll;
overflow-y: auto;
font-family: arial;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<script src="https://kit.fontawesome.com/221ae8aa0c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css?v=25">
<title>Title</title>
</head>
<body>
<div class="animation-div">
<div class="title">
<p>
Lorem
</p>
</div>
<div class="other-page-text">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet mauris commodo quis imperdiet. Mattis rhoncus urna neque viverra justo. Tincidunt vitae semper quis lectus. Velit euismod
in pellentesque massa placerat duis ultricies lacus sed. Nibh cras pulvinar mattis nunc. Pharetra convallis posuere morbi leo urna molestie at elementum. Mauris rhoncus aenean vel elit. Augue ut lectus arcu bibendum. Ac odio tempor orci dapibus
ultrices.
<br></br>
Ut sem viverra aliquet eget sit. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Tellus cras adipiscing enim eu turpis egestas pretium aenean pharetra. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
Vulputate dignissim suspendisse in est ante in nibh. Pharetra et ultrices neque ornare aenean. Odio facilisis mauris sit amet massa vitae. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut. Velit sed ullamcorper morbi tincidunt
ornare massa. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a.
<br></br>
Ac felis donec et odio pellentesque diam volutpat commodo sed. Nunc id cursus metus aliquam eleifend mi in. Diam in arcu cursus euismod quis viverra nibh cras. Amet facilisis magna etiam tempor orci eu lobortis elementum nibh. Viverra ipsum nunc aliquet
bibendum enim facilisis. Sagittis aliquam malesuada bibendum arcu vitae elementum. Duis at tellus at urna condimentum. Adipiscing diam donec adipiscing tristique. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Magna eget est
lorem ipsum. Enim diam vulputate ut pharetra. Egestas sed sed risus pretium quam vulputate dignissim. Tempor id eu nisl nunc mi. Pulvinar mattis nunc sed blandit. Sodales ut etiam sit amet nisl purus in mollis. Quam adipiscing vitae proin sagittis
nisl rhoncus mattis. Bibendum enim facilisis gravida neque.
<br></br>
Varius vel pharetra vel turpis nunc eget lorem. Mattis enim ut tellus elementum sagittis vitae et. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Sed risus pretium quam vulputate dignissim suspendisse in. Fermentum odio eu feugiat
pretium. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. Porta lorem mollis aliquam ut porttitor. Non arcu risus quis varius. Semper eget duis at tellus. Tempus
egestas sed sed risus pretium quam. Velit laoreet id donec ultrices tincidunt arcu non sodales. Arcu vitae elementum curabitur vitae nunc sed velit. Ipsum nunc aliquet bibendum enim facilisis gravida.
<br></br>
Morbi tristique senectus et netus et malesuada fames. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. At erat pellentesque adipiscing commodo elit. Quam pellentesque nec nam aliquam sem et tortor consequat. Gravida arcu
ac tortor dignissim convallis aenean et tortor. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Pellentesque pulvinar pellentesque habitant morbi. Tellus integer feugiat scelerisque varius morbi enim. Risus pretium quam vulputate
dignissim suspendisse in. Vulputate dignissim suspendisse in est ante in. Auctor neque vitae tempus quam. Habitasse platea dictumst vestibulum rhoncus est. Vestibulum morbi blandit cursus risus at.
</div>
</div>
<div class="background-svg">
<svg version="1.1" id="home-anim" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1820 1080" style="enable-background:new 0 0 1820 1080;" xml:space="preserve">
<g id="home">
<defs>
<rect id="masque" y="0.4" width="1820" height="1080" />
</defs>
<clipPath id="cache">
<use xlink:href="#masque" style="overflow:visible;" />
</clipPath>
<g id="light-blue">
<line x1="630.8" y1="894.3" x2="476.3" y2="1048.8" />
<line x1="858.2" y1="823.9" x2="1012.7" y2="669.4" />
<line x1="1066.9" y1="458.2" x2="912.4" y2="612.7" />
<line x1="1294.3" y1="387.8" x2="1448.8" y2="233.3" />
<line x1="1503" y1="22.1" x2="1348.5" y2="176.6" />
<line x1="895.6" y1="1166.6" x2="1050.1" y2="1012.1" />
<line x1="1104.3" y1="800.9" x2="949.8" y2="955.4" />
<line x1="1331.7" y1="730.5" x2="1486.2" y2="576" />
<line x1="1540.4" y1="364.8" x2="1385.9" y2="519.3" />
<line x1="1767.8" y1="294.4" x2="1922.3" y2="139.9" />
<line x1="1976.5" y1="-71.3" x2="1822" y2="83.2" />
<line x1="1369.1" y1="1073.2" x2="1523.6" y2="918.7" />
<line x1="1577.8" y1="707.5" x2="1423.3" y2="862" />
<line x1="1805.2" y1="637.1" x2="1959.7" y2="482.6" />
<line x1="1624" y1="1041.4" x2="1469.4" y2="1195.9" />
<line x1="-134.7" y1="674.9" x2="19.8" y2="520.4" />
<line x1="74" y1="309.2" x2="-80.5" y2="463.7" />
<line x1="301.4" y1="238.8" x2="455.9" y2="84.3" />
<line x1="510.1" y1="-126.9" x2="355.6" y2="27.6" />
<line x1="-88.6" y1="1008.9" x2="65.9" y2="854.4" />
<line x1="120.1" y1="643.1" x2="-34.4" y2="797.7" />
<line x1="347.5" y1="572.8" x2="502" y2="418.3" />
<line x1="556.2" y1="207.1" x2="401.7" y2="361.6" />
<line x1="783.6" y1="136.7" x2="938.1" y2="-17.8" />
<line x1="157.6" y1="985.8" x2="3" y2="1140.3" />
<line x1="384.9" y1="915.5" x2="539.4" y2="760.9" />
<line x1="593.6" y1="549.7" x2="439.1" y2="704.3" />
<line x1="821" y1="479.4" x2="975.5" y2="324.9" />
<line x1="1029.7" y1="113.6" x2="875.2" y2="268.2" />
<line x1="1257.1" y1="43.3" x2="1411.6" y2="-111.2" />
</g>
<g id="red">
<line x1="794.4" y1="883.4" x2="639.8" y2="1037.9" />
<line x1="694.6" y1="834.8" x2="849.2" y2="680.3" />
<line x1="1230.4" y1="447.3" x2="1075.9" y2="601.8" />
<line x1="1130.7" y1="398.7" x2="1285.2" y2="244.2" />
<line x1="1666.5" y1="11.2" x2="1512" y2="165.7" />
<line x1="732" y1="1177.5" x2="886.6" y2="1023" />
<line x1="1267.9" y1="790" x2="1113.3" y2="944.5" />
<line x1="1168.1" y1="741.4" x2="1322.7" y2="586.9" />
<line x1="1703.9" y1="353.9" x2="1549.4" y2="508.4" />
<line x1="1604.2" y1="305.3" x2="1758.7" y2="150.8" />
<line x1="1205.5" y1="1084.1" x2="1360.1" y2="929.6" />
<line x1="1741.4" y1="696.5" x2="1586.8" y2="851.1" />
<line x1="1641.6" y1="648" x2="1796.2" y2="493.5" />
<line x1="1787.5" y1="1030.5" x2="1633" y2="1185" />
<line x1="1687.8" y1="981.9" x2="1842.3" y2="827.4" />
<line x1="200.1" y1="-44.4" x2="45.6" y2="110.1" />
<line x1="237.5" y1="298.3" x2="83" y2="452.8" />
<line x1="137.8" y1="249.7" x2="292.3" y2="95.2" />
<line x1="673.6" y1="-137.8" x2="519.1" y2="16.7" />
<line x1="283.7" y1="632.2" x2="129.2" y2="786.8" />
<line x1="184" y1="583.7" x2="338.5" y2="429.2" />
<line x1="719.8" y1="196.2" x2="565.2" y2="350.7" />
<line x1="620" y1="147.6" x2="774.6" y2="-6.9" />
<line x1="321.1" y1="974.9" x2="166.6" y2="1129.4" />
<line x1="221.4" y1="926.4" x2="375.9" y2="771.8" />
<line x1="757.2" y1="538.8" x2="602.7" y2="693.4" />
<line x1="657.5" y1="490.3" x2="812" y2="335.8" />
<line x1="1193.3" y1="102.7" x2="1038.7" y2="257.3" />
<line x1="1093.5" y1="54.2" x2="1248.1" y2="-100.3" />
</g>
<g id="blue">
<line x1="225.8" y1="1151" x2="534.9" y2="841.9" />
<line x1="827.1" y1="1003.3" x2="518" y2="1312.3" />
<line x1="661.9" y1="714.9" x2="971" y2="405.9" />
<line x1="1263.1" y1="567.2" x2="954.1" y2="876.3" />
<line x1="1098" y1="278.8" x2="1407.1" y2="-30.2" />
<line x1="1699.2" y1="131.1" x2="1390.2" y2="440.2" />
<line x1="699.3" y1="1057.6" x2="1008.4" y2="748.5" />
<line x1="1300.6" y1="909.9" x2="991.5" y2="1218.9" />
<line x1="1135.4" y1="621.5" x2="1444.5" y2="312.4" />
<line x1="1736.6" y1="473.8" x2="1427.6" y2="782.8" />
<line x1="1571.5" y1="185.4" x2="1880.6" y2="-123.6" />
<line x1="1172.8" y1="964.2" x2="1481.9" y2="655.1" />
<line x1="1774.1" y1="816.5" x2="1465" y2="1125.5" />
<line x1="1608.9" y1="528.1" x2="1918" y2="219" />
<line x1="1219" y1="1298.1" x2="1528" y2="989.1" />
<line x1="1655.1" y1="862" x2="1964.1" y2="553" />
<line x1="232.8" y1="75.5" x2="-76.2" y2="384.6" />
<line x1="270.2" y1="418.2" x2="-38.8" y2="727.3" />
<line x1="105.1" y1="129.8" x2="414.2" y2="-179.2" />
<line x1="706.3" y1="-17.9" x2="397.3" y2="291.2" />
<line x1="-284.8" y1="899.9" x2="24.2" y2="590.8" />
<line x1="316.4" y1="752.2" x2="7.3" y2="1061.2" />
<line x1="151.3" y1="463.8" x2="460.3" y2="154.7" />
<line x1="752.5" y1="316.1" x2="443.4" y2="625.1" />
<line x1="587.3" y1="27.7" x2="896.4" y2="-281.4" />
<line x1="1188.6" y1="-120" x2="879.5" y2="189" />
<line x1="-247.4" y1="1242.5" x2="61.6" y2="933.5" />
<line x1="188.7" y1="806.4" x2="497.7" y2="497.4" />
<line x1="789.9" y1="658.8" x2="480.8" y2="967.8" />
<line x1="624.8" y1="370.4" x2="933.8" y2="61.3" />
<line x1="1226" y1="222.7" x2="916.9" y2="531.7" />
<line x1="1662.1" y1="-213.4" x2="1353" y2="95.6" />
</g>
</g>
</svg>
</div>
</body>
</html>
2
Answers
Remove the following code from .background-svg.
position: absolute;
.background-svgis covering the rest of the page, which is blocking any interaction with the page. Either lower itsz-indexor addingpointer-events: none;to its CSS so that the overlay ignores pointer events and the rest of the page can use them as normal.