0
300
ViewsHow to create a space where you can place items, and you can only scroll up and down in that space
I would like to make a page where there are filters on the left side of the screen, while there being a container, div, on the right side where the items are placed, but you can only scroll them when you place your cursor in that space, while the filters stay untouched. And the items do not go out of the space, so there is the space with a border, and the items don't go over the border, if you want to look at them, you will have to scroll down, this is my code, for now.
<html>
<head>
<title></title>
<style>
#vezivanje {
background-color: hotpink;
height: 80px;
display: flex;
align-items: center;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-size: 20px;
}
img {
height: 300px;
}
#filter {}
</style>
</head>
<body>
<div id="vezivanje">
<span class="upustvo">
<a style="text-decoration:none"><span style="color:white;font-weight:bold">Domaci zadatak</span></a>
</span>
</div>
<div id="filter">
<div id="uzrast">
<h2>Uzrast:</h2>
<p><input type="radio">0+</p>
<p><input type="radio">3+</p>
<p><input type="radio">6+</p>
<p><input type="radio">10+</p>
</div>
<div id="cena">
<h2>Cena:</h2>
<p>0<input type="range">10.000</p>
</div>
</div>
<div id="container"></div>
<script>
//--------------------------
let container = document.querySelector("#container");
let igracke = [];
function igrackeinfo(slika, godine, cena) {
this.slika = slika;
this.godine = godine;
this.cena = cena;
};
igracke.push(new igrackeinfo("https://yekupi.blob.core.windows.net/ekupirs/1200Wx1200H/EK000359292_1.image", "0+", "2000 RSD"));
igracke.forEach(t => {
container.innerHTML += "<div class = 'item'><img src = " + t.slika + ">" +
"<p>" + t.godine + " " + t.cena + "</p>"
"</div>"
})
</script>
</body>
</html>
·
Juan Pablo Isaza
Answer question