Можно ли изменить скорость прокрутки с помощью CSS или jQuery?

Событие прокрутки мыши можно переопределить с помощью JavaScript внутри браузера, используя слушатели событий. Таким образом, вы можете предотвратить стандартное поведение прокрутки и реализовать свое собственное (см. ответ cssyphus).

Тем не менее, я считаю, что такая практика — это УЖАСНАЯ идея с точки зрения удобства использования, доступности и уважения к вашим пользователям.

Ваша функция на чистом JavaScript, основанная на приведенном коде, выглядит отлично! Ниже привожу перевод на русский в стиле ответа на StackOverflow.

Вы можете использовать следующий код, который не зависит от jQuery и полностью реализован на JavaScript. Он перехватывает события прокрутки колеса мыши и анимирует прокрутку страницы.

if (window.addEventListener) {
    window.addEventListener('DOMMouseScroll', wheel, false); 
    window.onmousewheel = document.onmousewheel = wheel;
}

function wheel(event) {
    var delta = 0;
    if (event.wheelDelta) {
        delta = (event.wheelDelta) / 120;
    } else if (event.detail) {
        delta = -(event.detail) / 3;
    }

    handle(delta);
    if (event.preventDefault) {
        event.preventDefault();
    }
    event.returnValue = false;
}

function handle(sentido) {
    var inicial = document.body.scrollTop;
    var time = 1000; // Длительность анимации в миллисекундах
    var distance = 200; // Расстояние прокрутки
    animate({
        delay: 0,
        duration: time,
        delta: function(p) { return p; },
        step: function(delta) {
            window.scrollTo(0, inicial - distance * delta * sentido);
        }
    });
}

function animate(opts) {
    var start = new Date();
    var id = setInterval(function() {
        var timePassed = new Date() - start;
        var progress = (timePassed / opts.duration);
        if (progress > 1) {
            progress = 1;
        }
        var delta = opts.delta(progress);
        opts.step(delta);
        if (progress == 1) {
            clearInterval(id);
        }
    }, opts.delay || 10);
}

Этот код использует события DOMMouseScroll и onmousewheel, чтобы определить направление прокрутки. Функция handle инициирует анимацию прокрутки, а сама анимация реализована в методе animate, который плавно изменяет положение прокрутки.

Вы можете протестировать свою реализацию на jsbin. Если у вас возникнут дополнительные вопросы или проблемы, дайте знать!

Вот краткое и простое решение на чистом JavaScript для изменения скорости/шагов прокрутки (deltaY):

let custom_scroll = document.getElementById('custom-scroll');
let scroll_timeout = undefined;
let ratio = 0.25; // Измените это значение, чтобы увеличить или уменьшить скорость прокрутки
custom_scroll.addEventListener("wheel", (event) => {
    event.preventDefault();

    clearTimeout(scroll_timeout); // Очищаем таймер, чтобы избежать бесконечной прокрутки

    let target = custom_scroll.scrollTop + event.deltaY * ratio;
    let step = target > custom_scroll.scrollTop ? 1 : -1;

    let frame = () => {
        custom_scroll.scrollTop += step;
        if ((target < custom_scroll.scrollTop && step < 0) || (target > custom_scroll.scrollTop && step > 0)) {
            scroll_timeout = setTimeout(frame, 5);
        }
    }
    frame();
});

// Или еще более короткая версия:
let custom_scroll_short = document.getElementById('custom-scroll-short');
custom_scroll_short.addEventListener("wheel", (event) => {
    event.preventDefault();

    let target = custom_scroll_short.scrollTop + event.deltaY * ratio;

    custom_scroll_short.scrollTo({
        top: target,
        behavior: "smooth"
    });
});

#custom-scroll, #custom-scroll-short {
    width: 200px;
    height: 100px;
    background-color: gray;
    overflow-y: scroll;
    margin: 50px;
}

<div id="custom-scroll">
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
</div>

<div id="custom-scroll-short">
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
    <p>Item</p>
</div>

В этом примере вы можете изменить значение переменной ratio, чтобы настроить скорость прокрутки. При прокрутке колесиком мыши область с прокруткой будет двигаться плавно.

В дополнение к предыдущим ответам, важно также обратить внимание на следующую часть оригинального вопроса:

"Возможно ли ... сделать это с помощью CSS?"

Поведение (авто)прокрутки можно установить на 'smooth', но скорость прокрутки задается браузером.

html { scroll-behavior: smooth; }

В этом случае, к сожалению, ответ - нет: скорость плавной прокрутки невозможно задать или изменить с помощью CSS. Это свойство управляется браузером.

Например, в Firefox вы можете поэкспериментировать с параметрами и значениями general.smoothScroll в браузерной вкладке about:config, но будьте осторожны и не изменяйте другие важные настройки, которые могут там находиться.