Blazor使用js和css模糊滚动条上的元素

cl25kdpy 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(159)

我正在开发一个Blazor网络应用程序，我想在用户滚动时模糊一个特定的元素（背景）。
为了实现这一点，我调用了一个JS函数：

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

我的Razor页面：

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

@code{

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

下面是我的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);
}

我这里的问题是，document.scrollingElement.scrollTop的值在Chrome、Edge和Firefox上返回0。
我用$(window).scrollTop()，document.body.scrollTop，document.documentElement.scrollTop试过了，都不管用。
我错过什么了吗？
谢谢你。
你好，萨米。

css

来源：https://stackoverflow.com/questions/75616362/blazor-blur-an-element-on-scroll-with-js-and-css

2条答案

按热度按时间

zynd9foi1#

我认为使用scroll事件会更容易。当滚动开始时，将.blurred css添加到元素中，当滚动停止时，将其删除。它可能看起来像这样。

- HTML**

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

- 西撒哈拉**

.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我会使用CSS过渡来平滑效果。

赞(0）回复(0）举报 2023-03-05

q35jwt9p2#

我想出了一个解决办法，基于@clamchoda的回答。
在js脚本中：

window.onscroll = function () {

    var distanceScrolled = document.scrollingElement.scrollTop;

    if (distanceScrolled < 200) {

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

在css文件中，我删除了height:100vh;。
在此之前，window.scroll是不起作用的，去掉height值后，window.scroll起作用了，scrollTop返回了正确的值。

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

这个解决方案适用于Chrome、Edge和Firefox。
感谢Clamchoda和所有人。
你好，萨米。

赞(0）回复(0）举报 2023-03-05

我来回答

Blazor使用js和css模糊滚动条上的元素

2条答案

相关问题

热门标签

最新问答