Płynne przewijanie horyzontalne w divie

0

Szukam sposobu, najlepiej takiego który bazuje czysto na html+css+vanilla javascript, aby (horyzontalne) przewijanie (kółkiem myszy) w środku danego diva było "gładkie". Kod poniżej działa tylko na body, ponieważ wykorzystuje event onload, którego nie można użyć na divie. Czy jest zatem możliwość edytowania jakoś poniższego kodu, aby osiągnąć taki efekt płynnego przewijania w divie? Czy w ogóle nie ma sensu na nim bazować? ---> Wizualizacja problemu; jsfiddle

<body onload="init()">
  <div id="sliderbar"> 

function init() {
      new SmoothScroll(document, 120, 12)
    }
function SmoothScroll(sliderbar, speed, smooth) {
      if (sliderbar === document)
        sliderbar = (document.scrollingElement ||
          document.documentElement ||
          document.body.parentNode ||
          document.body) // cross browser support for document scrolling
    
      var moving = false
      var pos = sliderbar.scrollLeft
      var frame = sliderbar === document.body &&
        document.documentElement ?
        document.documentElement :
        sliderbar // safari is the new IE
    
      sliderbar.addEventListener('mousewheel', scrolled, {
        passive: false
      })
      sliderbar.addEventListener('DOMMouseScroll', scrolled, {
        passive: false
      })
    
      function scrolled(e) {
        e.preventDefault(); // disable default scrolling
    
        var delta = normalizeWheelDelta(e)
    
        pos += -delta * speed
        pos = Math.max(0, Math.min(pos, sliderbar.scrollWidth - frame.clientWidth)) // limit scrolling
    
        if (!moving) update()
      }
    
      function normalizeWheelDelta(e) {
        if (e.detail) {
          if (e.wheelDelta)
            return e.wheelDelta / e.detail / 40 * (e.detail > 0 ? 1 : -1) // Opera
          else
            return -e.detail / 3 // Firefox
        } else
          return e.wheelDelta / 120 // IE,Safari,Chrome
      }
    
      function update() {
        moving = true
    
        var delta = (pos - sliderbar.scrollLeft) / smooth
    
        sliderbar.scrollLeft += delta
    
        if (Math.abs(delta) > 0.5)
          requestFrame(update)
        else
          moving = false
      }
    
      var requestFrame = function() { // requestAnimationFrame cross browser
        return (
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(func) {
            window.setTimeout(func, 1000 / 50);
          }
        );
      }()
    }
3

Nie możesz po prostu zamiast:

function init() {
  new SmoothScroll(document, 120, 12)
}

dać

function init() {
  new SmoothScroll(document.getElementById('sliderbar'), 120, 12)
}

https://jsfiddle.net/m5ktcqL6/

0

@m31: Omg, dzięki, uratowałeś moje biedne nerwy ;P

1 użytkowników online, w tym zalogowanych: 0, gości: 1