Question

我想基于具有div：滚动的div中的滚动量为filter: blur(px);属性设置动画。当您滚动到底部时，我已经获得了以下代码，可以为我做一个修改：

jQuery(function($) {
    $('.modal-container').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

如何根据滚动百分比平滑地调整filter: blur(px);的数量？

Answer 1

您可以这样实现：

$(function() {
  $('.modal-container').scroll(function() {

    var scrollY = $(this).scrollTop();
    var height = $(this).height();
    var scrollHeight = $('#inner').height();
    var percentage = (scrollY / (scrollHeight - height)) * 100;

    $("#inner").css('filter', 'blur('+ percentage +'px)')
  })
});

在变量percentage中，您可以找到滚动百分比。因此，如果您一直滚动浏览，则为100。

之后，我将该百分比应用为CSS中的模糊处理。如果您不希望其升至blur(100px)，则可以将百分比乘以某值。例如。 percentage * 0.5可以使模糊提高到50px，* 0.2可以使模糊提高到20px，依此类推。

在具有溢出的div内滚动时添加CSS动画：scroll

1 个答案: