Search code examples
htmlcssmacosoverscroll

give different color to top and bottom of the webpage body overscroll

My portfolio has a black background color at the top and a white one at the bottom. When you overscroll at the top the white background of the body shows for a brief moment, creating an unwanted contrast like this: white background showing on scroll up when at the top

So I want black overscroll for the top and white for the bottom. A simple fix for the top is to set the background-color of the body to black, but then I get the reverse problem for the bottom. I tried using linear-gradient on the body and html-page or putting colored containers with negative margins at top or bottom, but that did not work. Is there a way to have different colors for top and bottom overscroll?

Example Code Sandbox: https://codesandbox.io/s/overscroll-color-ns9yd

Example Code Sandbox Live (you can't test the overscroll in the sandbox): https://ns9yd.csb.app/

Addition: Today when I used chrome on android and on windows with a mouse I realized that the described overscroll effect does not appear there. Therefore the effect is likely specific to touchpad scrolling. I have been using a MacBook when I asked the question. So it might only occur on MacBooks when scrolling with the touchpad

Youtube Demonstration of overscrolling: https://youtu.be/Ec1D6KNlhIM

Overscrolling with body background black (the simple fix): https://youtu.be/zYITinXs6OY

Solution

  • I understand this question is outdated, but I had a similar issue and came up with a fix.

    By putting a listener on the window's wheel event, we can check the delta of the scroll. With that information we can change the documentElement background color to match the page's (black)"ceiling" or (white)"floor":

    let isCeiling = false;

window.addEventListener('wheel', (e) => {

    const delta = e.deltaY;

    if (delta < 0 && !isCeiling) {
        document.documentElement.style.background = 'black';
        isCeiling = true;
    } else if (delta > 0 && isCeiling) {
        document.documentElement.style.background = 'white';
        isCeiling = false;
    }

});