Всем привет. Стоит задача, сделать строку с контентом, который будет overflow-x: scroll, и который еще будет сам медленно скролиться влево при наведении мыши на область, и возвращаться обратно при отведении.
Задача еще немного усложняется тем, что поверх я повесил кастомный скроллбар из
этой библиотеки
Вот страничка с результатом:
sandbox.maximshadrin.ru/scrolledonhover
Изначально задачи возвращения назад не стояло, и всё прекрасно работало с таким кодом.
//horisontal block auto move left on mouse move
var timer;
$(".horizontal-scrolled-block .mCSB_container")
.mouseover(function(event) {
$cont = $(this);
var left = $cont.offset().left;
timer = setInterval(function(){
left = $cont.offset().left;
left = left - 1;
$cont.css('left', left);
}, 25);
})
.mouseout(function(event) {
clearInterval(timer);
});
Но потом заказчик сказал, что надо текст возвращать обратно при отведении. И вот тут у меня возникли проблем. Я переписал mouseout таким образом:
.mouseout(function(event) {
clearInterval(timer);
$th = $(this);
$th.animate({
left: 0
}, 2000);
});
И теперь всё работает очень плохо. Он уезжает назад только один раз. Потом возвращается назад и фиксируется на left: 0. При этом событие реагирует и на ручной скролл контента, возвращая назад в 0.
Такое ощущение, что задача не решаемая в таком ключе.
И еще, вопрос, наведение мыши работает только на контейнер .mCSB_container, игнорируя его детей. То есть при наведении на любого ребёнка внутри контейнера, происходит событие mouseout. Можно заставить срабатывать скрипт при наведении на любое место контейнера?
UPD: Еще есть проблемы с возникновением горизонтального скролла, он появляется, только когда контейнер по ширине больше размеров экрана. То есть, в случае небольшого количества контента, вернуть контент на место не предоставится возможным, так как скроллбара просто-напросто не будет.
Мне кажется, надо заменять скроллбар на таскание мышкой области (примерно так, как реализован скролл на мобильных или в том же слайдере swiper) Но я не знаю, как такое реализовать и нагуглить ничего толкового не смог...
Простой
