The Dilemma
At the top of my webpage, I have a sleek masthead with a captivating background image that scrolls along with the page. However, there is an issue when users overscroll upwards, causing an undesirable white overflow to appear. To rectify this situation, my goal is to anchor the background in place when users engage in overscrolling, allowing the content to move downward while maintaining the fixed background.
An Example of Code
index.html
<div class="masthead">
</div class="container">
<h1>Hello, World</h1>
<p>Lorem ipsum dolor</p>
</div>
</div>
main.scss
/*...*/
.masthead {
display: block;
text-align: center;
color: white;
background-image: url('http://via.placeholder.com/1900x1250/ff6666/000000');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
}
/*...*/
Reasons for Not Using overscroll-behavior-y: none
While some may recommend using overscroll-behavior-y: none, this solution lacks support from Safari/WebKit and can come off as overly harsh. I appreciate the natural overscroll effect and would like to maintain it while ensuring a clean user interface.
Challenges Faced
My attempts at resolving this included implementing the background-attachment: fixed property, which ended up slightly altering the image positioning. Furthermore, despite fixing the background, the masthead fails to extend into the overflow, leaving its background white.
Technologies Utilized
SCSSjQuerybootstrap