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