Показать сообщение отдельно
  #2 (permalink)  
Старый 19.05.2016, 00:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Bond,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <style type="text/css">
     .hot{
          border: 1px dashed Gray; padding: 5px; height: 200px; width: 200px;
          overflow-y: scroll;
     }

   </style>

</head>

<body>

  <div class="hot"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Sedulo, inquam, faciam.</i> Quorum altera prosunt, nocent altera. Duo Reges: constructio interrete. Sin eam, quam Hieronymus, ne fecisset idem, ut voluptatem illam Aristippi in prima commendatione poneret. Etenim semper illud extra est, quod arte comprehenditur. <i>Eam stabilem appellas.</i> </p></div>
  <script>
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.move('Top','Height');
        } else {
            th.move('Left','Width');
        } }, speed);
// Переключаем флаг наведение курсора
        this.elem.onmouseenter = function () { th.flag = false; };
        this.elem.onmouseleave = function () { th.flag = true; };
    }
// Метод для скролла
    Scroll.prototype.move = function (a,b) {
        if (!this.flag) { return; }; // Если флаг false то есть курсор наведен значит return
        this.elem["scroll"+a]++;
        if (this.elem["scroll"+a] >= (this.elem["scroll"+b] - this.elem["client"+b])) {
            this.elem["scroll"+a] = 0;
            return;
        }
    };
    return Scroll;
}());
new Scroll(".hot", 30); // Указывается два параметра - селектор и скорость движения

  </script>
</body>
</html>
Ответить с цитированием