在 div 内滚动时添加 CSS 动画溢出：滚动

【问题标题】：Add CSS animation when scrolling inside div with overflow: scroll在 div 内滚动时添加 CSS 动画溢出：滚动
【发布时间】：2019-10-22 19:55:07
【问题描述】：

我想根据具有溢出的 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); 数量？

【问题讨论】：

stackoverflow.com/a/12222524/9496199
添加一些if(scrollPercentage bla bla bla) 然后更改模糊

标签： jquery css

【解决方案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，依此类推。

【讨论】：