Вертикальная прокрутка div при наведении курсора

Question

Я хочу, чтобы div прокручивался вертикально (вниз), когда пользователь наводит указатель мыши, и позволял ему прокручиваться назад к вершине div при наведении мыши.

$(".content").on('mouseover', '.description', function() {
  if ($(this).hasClass('scrolling')) return;
  console.log('in');
  var maxscroll = $(this)[0].scrollHeight
  $(this).animate({
    scrollTop: maxscroll
  }, 450);
});

$(".content").on('mouseout', '.description', function() {
  $(this).stop();
  console.log('out');
  $(this).addClass('scrolling');
  $(this).animate({
    scrollTop: 0
  }, 425, "linear", function() {
    $(this).removeClass('scrolling')
  });
});

.content {
  height: 70px;
  width: 300px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="content">
    <div class="description">
      Lorem ipsum dolor sit amet, consectetr adipiscing elit. Fusce eget turpis a tortor porttitor eleifend. Phasellus tincidunt commodo purus non pellentesque. Nam a turpis magna. Vestibulum quis erat at dolor bibendum auctor in mattis orci. Etiam vehicula
      est at metus tempor, sit amet cursus velit bibendum. Sed varius sapien metus, non convallis sem scelerisque at. Nam ac elementum turpis, vel interdum turpis. Nunc et blandit lacus. Donec pellentesque dictum quam, non varius dui. Mauris elit eros,
      ultrices non justo at, auctor ornare nibh. Nam vehicula elit at ipsum placerat, nec dictum ex scelerisque. Pellentesque laoreet iaculis odio, id posuere risus.
    </div>
  </div>
</div>

Я думаю, что я близко, но я еще не понял, почему он еще не прокручивается.

Answer 1

Это потому, что $(this) в ваших обратных вызовах слушателя событий не относится к элементу .content с возможностью прокрутки, а вместо этого ссылается на .description. На самом деле нет необходимости прослушивать всплывающие при наведении курсора мыши мыши, которые всплывают от .description до .content. Вы можете просто сделать это:

$(".content").on('mouseover', function() { ... }
$(".content").on('mouseout', function() { ... }

... и $(this) будет ссылаться на фактический элемент .content и будет прокручиваться, как и ожидалось. См. Подтверждение концепции ниже:

$(".content").on('mouseover', function() {
  if ($(this).hasClass('scrolling')) return;
  var maxscroll = $(this)[0].scrollHeight
  $(this).animate({
    scrollTop: maxscroll
  }, 450);
});

$(".content").on('mouseout', function() {
  $(this).stop();
  $(this).addClass('scrolling');
  $(this).animate({
    scrollTop: 0
  }, 425, "linear", function() {
    $(this).removeClass('scrolling')
  });
});

.content {
  height: 70px;
  width: 300px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-color: #ccc;
}

.content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="content">
    <div class="description">
      Lorem ipsum dolor sit amet, consectetr adipiscing elit. Fusce eget turpis a tortor porttitor eleifend. Phasellus tincidunt commodo purus non pellentesque. Nam a turpis magna. Vestibulum quis erat at dolor bibendum auctor in mattis orci. Etiam vehicula
      est at metus tempor, sit amet cursus velit bibendum. Sed varius sapien metus, non convallis sem scelerisque at. Nam ac elementum turpis, vel interdum turpis. Nunc et blandit lacus. Donec pellentesque dictum quam, non varius dui. Mauris elit eros,
      ultrices non justo at, auctor ornare nibh. Nam vehicula elit at ipsum placerat, nec dictum ex scelerisque. Pellentesque laoreet iaculis odio, id posuere risus.
    </div>
  </div>
</div>

Однако, если вам действительно нужно настаивать на привязке событий mouseover / mouseout к вложенному элементу .description, вам нужно будет поменять местами все $(this) ссылки на $(this).closest('.content'):

$(".content").on('mouseover', '.description', function() {
  var $content = $(this).closest('.content');
  if ($content.hasClass('scrolling')) return;
  var maxscroll = $(this)[0].scrollHeight
  $content.animate({
    scrollTop: maxscroll
  }, 450);
});

$(".content").on('mouseout', '.description', function() {
  var $content = $(this).closest('.content');
  $content.stop();
  $content.addClass('scrolling');
  $content.animate({
    scrollTop: 0
  }, 425, "linear", function() {
    $content.removeClass('scrolling')
  });
});

.content {
  height: 70px;
  width: 300px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-color: #ccc;
}

.content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="content">
    <div class="description">
      Lorem ipsum dolor sit amet, consectetr adipiscing elit. Fusce eget turpis a tortor porttitor eleifend. Phasellus tincidunt commodo purus non pellentesque. Nam a turpis magna. Vestibulum quis erat at dolor bibendum auctor in mattis orci. Etiam vehicula
      est at metus tempor, sit amet cursus velit bibendum. Sed varius sapien metus, non convallis sem scelerisque at. Nam ac elementum turpis, vel interdum turpis. Nunc et blandit lacus. Donec pellentesque dictum quam, non varius dui. Mauris elit eros,
      ultrices non justo at, auctor ornare nibh. Nam vehicula elit at ipsum placerat, nec dictum ex scelerisque. Pellentesque laoreet iaculis odio, id posuere risus.
    </div>
  </div>
</div>