Blazor blur an element on scroll with js and css

Question

Blazor blur an element on scroll with js and css

400 Views Asked by Samih EL SAKHAWI At 02 March 2023 at 13:51

I'm working on a Blazor web app, and I would like to blur a specific element (background) when the user scrolls.

To achieve this, I called a JS function:

function backgroundBlurry() {
var distanceScrolled = document.scrollingElement.scrollTop;
$('.pageBackground').css({
        filter: "blur(" + (distanceScrolled/10) + "px)"     
    })
}

My Razor page:

<body class="windowStyle" @onscroll="@Background">
    <div class="pageBackground"/>
</body>

@code{

private async Task Background()
    {            
        await _jsRuntime.InvokeVoidAsync("backgroundBlurry");
    }
}

And here the classes of my css:

.windowStyle {
    margin: 0;
    user-select: none;
    overflow: overlay;
    width: 100%;
    height: 100vh;
    background-color: #1c2941;
    display: grid;
    align-items: center;
    justify-items: center;
}

.pageBackground {
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: url(../res/image/web_background.webp);
    display: grid;
    justify-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: fixed;
    filter: blur(0px);
    transform: scale(1.2);
}

My issue here, is the value for document.scrollingElement.scrollTop returns 0 on Chrome, Edge and Firefox.

I tried with $(window).scrollTop(), document.body.scrollTop, document.documentElement.scrollTop, and none of them worked.

Did I missed something?

Thank you.

Regards, Samih.

Original Q&A

There are 2 best solutions below

**clamchoda** · Answer 1 · 2023-03-02T19:03:20.940000

I think this would be easier using the scroll event. When scrolling is started add .blurred css to the element, and remove it when scrolling is stopped. It could look something like this.

Html

<div style="min-height:2000px">
  <div class="blur-on-scroll" style="min-height:500px;width:100px"></div>
</div>

Css

.blurred{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  background-color: #ccc;
}

Javascript

window.addEventListener('scroll', function() {
    var blurredElms = document.getElementsByClassName("blur-on-scroll");
    if(timer !== null) {
        // When scrolling is started add the blurred class.
        Array.from(blurredElms).forEach(
            function (element, index, array) {
              element.classList.add('blurred');
            }
        );
    
        clearTimeout(timer);        
    }
    timer = setTimeout(function() {
        // When scrolling is stopped, remove blurred class.
        Array.from(blurredElms).forEach(
            function (element, index, array) {
              element.classList.remove('blurred');
            }
        );
          
          
    }, 150);
}, false);

JSFiddle I would use CSS transitioning to smooth out the effect.

**Samih EL SAKHAWI** · Answer 2 · 2023-03-03T08:03:42.207000

I came up with a solution, based on @clamchoda answer.

in the js script:

window.onscroll = function () {

    var distanceScrolled = document.scrollingElement.scrollTop;

    if (distanceScrolled < 200) {

        $('.pageBackground').css({
            filter: "blur(" + (distanceScrolled / 20) + "px)"
        })
    }
};

And in the css file, I removed height:100vh;.

Before that, window.scroll was not working. After removing the height value, window.scroll worked, and scrollTop returns a correct value.

.windowStyle {
    user-select: none;
    overflow: overlay;
    overscroll-behavior: none;
    width: 100%;
    background-color: #1c2941;
    display: grid;
    align-items: center;
    justify-items: center;
}

This solution worked for Chrome, Edge and Firefox.

Thanks to Clamchoda, and everyone.

Regards, Samih.

Blazor blur an element on scroll with js and css

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in BLAZOR

Related Questions in BLUR

Related Questions in ONSCROLL

Trending Questions

Popular # Hahtags

Popular Questions