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>

鼠标悬停时垂直滚动div

1 个答案: