Появляется "тряска" при прокрутке страницы тачпадом

Пытаюсь реализовать следующее поведение на странице: Страница прокручивается до определенного <div>, после чего вертикальная прокрутка должна остановится и должен прокрутится div в сторону. То есть, прокручиваем страницу ниже, а блок крутится вбок. При достижении конца блока, возобновляется прокрутка страницы. Пробую осуществить это с помощью изменения padding у body. При прокрутке колесиком мыши все нормально, но при прокрутке тачпадом время от времени появляется тряска. Подскажите, как это можно исправить?

var $hor = $("#horizontal");

$(window).on('scroll', function (event) {
  var top = $(window).scrollTop();
  var lim = $hor.position().top - $hor[0].scrollLeft - ($(window).height() - $hor.outerHeight());
  var width = $hor[0].scrollWidth - $hor.outerWidth();
  var delta = Math.min(Math.max(top - lim, 0), width);

  $hor[0].scrollLeft = delta;
  console.log(top);
  $("body").css({'padding-top': delta});

});