As you can see the structure of my html, I am trying to position the cursor in the left column of the screen and scroll down so that instead of scrolling inside the body and going to the footer, i want it to scroll the righ side. And when the content ends, the footer of my page is displayed. I don’t know if I understood myself but I want the content of the right column to be shown specifically when I position myself in both columns and scroll.
Here i show my html, css and javascript code. Perhaps something is preventing the action i want to do.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Two Columns</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap">
<script src="scroll.js"></script>
</head>
<body id="the-body">
<div class="content" id="content">
<div class="column-1" id="column-1">
<img class="brownie-img" src="brownie.jpg" alt="Brownie de Cacao">
</div>
<div class="column-2" id="column-2">
<h1>Brownie de Cacao</h1>
<h2>Descripción</h2>
<div class="description">
<p>"Lorem Ipsum Content..."</p>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<p>© 2023 Mi Sitio Web. Todos los derechos reservados.</p>
<ul>
<li><a href="#">Política de privacidad</a></li>
<li><a href="#">Términos y condiciones</a></li>
</ul>
</div>
</footer>
</body>
</html>
html{
height: 100%;
width: 100%;
background-color: brown;
}
body{
height: 100%;
width: 100%;
margin: 0;
}
.content{
background-color: bisque;
display: flex;
height: 100vh;
overflow-y: auto;
}
.column-1{
width: 50%;
text-align: center;
border-right: 1px solid brown;
overflow-y: auto;
max-height: 100vh;
}
.brownie-img-container{
overflow: auto;
width: 100%;
height: 100%;
}
.title{
margin: 0;
}
.brownie-img{
width: 50%;
border-radius: 50%;
margin-top: 25vh;
}
.column-2{
width: 50%;
text-align: center;
padding: 10px;
font-family: 'IBM Plex Sans', sans-serif;
overflow-y: auto;
max-height: 100vh;
}
.description{
text-align: justify;
}
document.addEventListener('DOMContentLoaded', function()
{
var column1 = document.getElementById('column-1');
var column2 = document.getElementById('column-2');
column1.addEventListener('scroll', function ()
{
column2.scrollTop = column1.scrollTop;
});
});
By the moment i don´t have any other idea.
