The issue arises when I attempt to use the overflow hidden property in combination with parallax scrolling.
Although everything seems to be working correctly with JavaScript for parallax scrolling, setting the overflow to hidden does not contain the image within the div as expected.
Below is the HTML code snippet:
<div id="page2">
<p id="bb">The title</p> //Some title
<div id="bg"></div> //Blue box in front of the image(design decision)
<img src="img/Food.jpg" alt="prlx" id="prlx"/> //The image which has the propery
</div>
Here is the JavaScript eventListener and function:
window.addEventListener("scroll",func,false);
function func(){
prlx_lyr_1 = document.getElementById("prlx");
prlx_lyr_1.style.top = (window.pageYOffset/4)+"px"
}
Additionally, here is the CSS styling for the image in question that I am trying to hide any overflowing parts:
#page2 img{
position:relative;
top:-300px;
}
Furthermore, this is the CSS for the div containing the image:
#page2{
overflow:hidden;
height:250px;
}
There are some extra CSS rules pertaining to the #bg element.
Update: The js fiddle link provided displays how the container div's overflow is not properly hidden.
Please refer to this js fiddle link for a closer look at the issue.