Как плавно прокрутить блок на jQuery?

Question

[Max Shteklya]

Делаю подобный блок как на сайте https://skybot.io/ (Слева). Никак не могу сделать чтобы блок текст прокручивался вниз правильно и останавливался после наведения на него мышкой, а так же продолжал движение после перемещения курсора от текста. У .main_text overflow hidden Вот код:

$('.main_text').stop().animate({
         scrollTop: 0
      }, 1)

      scrollPx = $(".main_block .main_text .in_text")[0].scrollHeight-$(window).height()/2
      setTimeout(function () {

         $('.main_text').stop().animate({
            scrollTop:scrollPx
         }, scrollPx*20, "linear")
         console.log(scrollPx);
      }, 1500)

      $('.main_text').mouseover(function () {
         $(this).stop()
         console.log("stop")
      }, function () {
         $('.main_text').mouseout(function () {
            $('.main_text').stop().animate({
               scrollTop:scrollPx
            }, scrollPx*20, "linear")
         })
      })

Answer 1

[kocherman]

Что именно не получается у вас?
Я бы заменил mouseover и mouseout на mouseenter и mouseleave соответственно.

Comments

[Max Shteklya]

Во-первых, как-то раз через раз работает сам скролл, во-вторых, наведение для остановки и тд вообще не работает

[kocherman]

Замените mouseover на mouseenter и mouseout на mouseleave.
В противном случае вам нужно пользоваться одним тегом для всего текста, а все вложенные теги будут вызывать mouseover и mouseout, хотя по логике - это вам и мешает

[Max Shteklya]

kocherman, Может есть готовый плагин для этого?

[kocherman]

Да с виду у вас нормально все написано.
Надо сделать этот код рабочим, я не воспроизводил его, только проиграл у себя в голове.
Если хотите чтобы помимо автоскролла работал скролл мышкой, то вместо
overflow:hidden
можно скрыть сам скроллер, но при этом оставить элемент скроллящимся:

.main_text::-webkit-scrollbar {
  display: none;
}

[Max Shteklya]

kocherman, Так и сделал

[kocherman]

Max Shteklya, И еще linear тут не очень подходит. тут нужен на старт скроллинга ease-in и на остановку сколлинга ease-out

[Max Shteklya]

kocherman, Всё сделал, и остановку и сам скрол, но как сделать продолжение скролинга?

[kocherman]

Max Shteklya, Хотя не, там вообще не нужен яваскрипт. Все можно сделать обычным CSS.

.main_text.animate{
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: translate(200px, 0);
  }
  50% {
    transform: translate(0px, 0);
  } 
100% {
    transform: translate(200px, 0);
  }

}

.main_text:hover 
{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

[Max Shteklya]

kocherman, rotate? убрал яваскрипт и добавил css вообще не работает

[kocherman]

Max Shteklya, черт не та ссылка
jsfiddle.net/r6m0ewbf --- вот эта правильная

[Max Shteklya]

kocherman, это то, что нужно. Но оно не скроллиться

[kocherman]

Max Shteklya, jsfiddle.net/jp9106rz - вот это конечный вариант

[Max Shteklya]

kocherman, То, что Вы сделали, по сути да, но нужно чтоб если я проскролил вверх оно и убрал курсор, оно поехало назад

[kocherman]

Max Shteklya, приношу извинения за уже наверное неактуальный ответ.
Вы имели в виду вот так чтоли?
jsfiddle.net/epndwj5s/3
А то мне кажется мы недостаточно корректно понимаем друг друга.

[kocherman]

конечный результат необходимо замедлить, и надо прописать размеры в анимации из процентов% в пикселиpx или в относительный размер шрифтаrem;