Добавьте CSS анимацию при прокрутке внутри div с переполнением: scroll

Question

Я хотел бы анимировать свойство filter: blur(px); на основе суммы прокрутки внутри элемента div с переполнением: прокрутка. Я получил следующий код, чтобы дать мне изменение при прокрутке вниз:

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 позволяет увеличить размытие до 50 пикселей, * 0.2 - до 20 пикселей и т. Д.