Всем здравствуйте. Проблем с кодом вроде нет, просто нужно обсудить и оптимизировать
Задача такая - на странице есть блоки и для некоторых из них нужно сделать автоскролл контента с разной для каждого блока скоростью, также при наведении курсора скролл должен останавливаться. Также скролл может быть как горизонт так и вертикал.
Решил эту задачу так (писал на TypeScript, но даю исходник на JS)
var Scroll = (function () {
function Scroll(elem, speed) {
this.flag = true;
this.elem = document.querySelector(elem);
this.computedStyle = getComputedStyle(this.elem);
var th = this;
// Если overflowY == "scroll" то запускаем метод вертикального скролла иначе горизонт
setInterval(function () { if (th.computedStyle.overflowY == "scroll") {
th.scrollVertical();
} else {
th.scrollHorizontal();
} }, speed);
// Переключаем флаг наведение курсора
this.elem.onmouseenter = function () { th.flag = false; };
this.elem.onmouseleave = function () { th.flag = true; };
}
// Метод для вертикального скролла
Scroll.prototype.scrollVertical = function () {
if (!this.flag) { return; }; // Если флаг false то есть курсор наведен значит return
this.elem.scrollTop = this.elem.scrollTop + 1;
if (this.elem.scrollTop >= (this.elem.scrollHeight - this.elem.clientHeight)) {
this.elem.scrollTop = 0;
return;
}
};
// Метод для горизонтального скролла
Scroll.prototype.scrollHorizontal = function () {
if (!this.flag) { return; }; // Если флаг false то есть курсор наведен значит return
this.elem.scrollLeft = this.elem.scrollLeft + 1;
if (this.elem.scrollLeft >= (this.elem.scrollWidth - this.elem.clientWidth)) {
this.elem.scrollLeft = 0;
return;
}
};
return Scroll;
}());
new Scroll("#text-vat", 100); // Указывается два параметра - селектор и скорость движения
Есть парочка вопросов
Первый - событие наведение курсора - можно ли объединить две строки в одну - как в jQuery сделано через .hover() ??
this.elem.onmouseenter = function () { th.flag = false; };
this.elem.onmouseleave = function () { th.flag = true; };
Второй - можно ли два метода scrollVertical() и scrollHorizontal() объединить - ведь делают они почти одно и тоже только один работает с высотой и топ, а второй с шириной и лефт.
Буду признателен за участие
