Показать сообщение отдельно
  #1 (permalink)  
Старый 18.05.2016, 23:16
Профессор
Отправить личное сообщение для Bond Посмотреть профиль Найти все сообщения от Bond
 
Регистрация: 16.06.2013
Сообщений: 172

Автоскрол для блока. ООП
Всем здравствуйте. Проблем с кодом вроде нет, просто нужно обсудить и оптимизировать
Задача такая - на странице есть блоки и для некоторых из них нужно сделать автоскролл контента с разной для каждого блока скоростью, также при наведении курсора скролл должен останавливаться. Также скролл может быть как горизонт так и вертикал.

Решил эту задачу так (писал на 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() объединить - ведь делают они почти одно и тоже только один работает с высотой и топ, а второй с шириной и лефт.

Буду признателен за участие

Последний раз редактировалось Bond, 18.05.2016 в 23:20.
Ответить с цитированием