Могу ли я изменить скорость прокрутки с помощью css или jQuery?

Ответ 1

Нет. Скорость прокрутки определяется браузером (и обычно непосредственно настройками на компьютере/устройстве). CSS и Javascript не имеют (или не должны) каким-либо образом влиять на настройки системы.

Таким образом, существует множество способов, которыми вы могли бы попытаться подделать другую скорость прокрутки, перемещая свой контент вокруг таким образом, чтобы противодействовать прокрутке. Однако я считаю, что это идея HORRIBLE с точки зрения удобства использования, доступности и уважения к вашим пользователям, но я бы начал с поиска событий, которые запускают ваши целевые браузеры, указывающие на прокрутку.

Как только вы сможете захватить событие прокрутки (предположим, что вы можете), вы сможете динамически корректировать свой контент, чтобы видимая часть была видимой.

Другим подходом было бы заняться этим во Flash, что дает вам хотя бы некоторый уровень контроля над прокруткой событий.

Ответ 2

Скорость прокрутки CAN может быть изменена, скорректирована, отменена, все вышеперечисленное - через javascript (или js-библиотеку, такую ​​как jQuery).

ПОЧЕМУ вы хотите это сделать? Параллакс - лишь одна из причин. Я не знаю, почему кто-то возражает против этого - те же отрицательные аргументы могут быть сделаны против скрытия DIV, раздвижных элементов вверх/вниз и т.д. Веб-сайты всегда представляют собой комбинацию технической функциональности и дизайна UX - хороший дизайнер может использовать почти любые технические возможности для улучшения UX. Это то, что делает его/ее хорошим.

Тони Алмейда из Португалии создала блестящую демонстрацию, воспроизведенную ниже:

jsFiddle Demo

HTML:

<div id="myDiv">
    Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span>
</div>

JavaScript/JQuery:

  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(delta) {
      var time = 1000;
      var distance = 300;

      $('html, body').stop().animate({
          scrollTop: $(window).scrollTop() - (distance * delta)
      }, time );
  }

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

Источник:

Как изменить значение по умолчанию scrollspeed, scrollamount, scrollinertia веб-страницы

Ответ 3

Я просто создал чистую функцию Javascript, основанную на этом коде. Демо-версия только для Javascript: http://jsbin.com/copidifiji

Это независимый код из jQuery

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);
}

Ответ 4

Просто используйте этот js файл. (Я упомянул 2 примера с разными js файлами, надеюсь, что второе - это то, что вам нужно) Вы можете просто изменить количество прокрутки, скорость и т.д., Изменив параметры.

https://github.com/nathco/jQuery.scrollSpeed

Здесь Демо

Вы также можете попробовать this. Здесь демонстрация