将鼠标悬停在图像上时，以受控方式滚动div内容 [英] Scroll the div content in a controlled manner on hovering over an image

问题描述

我有一个高度和宽度有限的div，内容超过了div的大小。所以我在div的顶部和底部放置了两个图像，我希望内容相对于我悬停的图像上下滚动。我已经设法得到了徘徊，但它不受控制，直到最后，即使我将鼠标移离图像。因此，当我将鼠标移开时，我希望滚动停止，当我再次将鼠标悬停在图像上时，我希望滚动从它停止的位置恢复。 jsfiddle

I have a div with a limited height and width with content that exceeds the size of the div. So I have placed two images both at the top and bottom of the div and I want the content to scroll up and down with respect to the image I hover upon. I have managed to the get the hovering but it uncontrolled, it goes till the end even if I move my mouse away from the image. So I want the scrolling to stop as soon as I move my mouse away and when I hover the mouse again on the image I want the scrolling to resume from where it had left off. jsfiddle

HTML：

<div id="hover"> HOVER ME </div>

<div id="container">

The Mauritius Blue Pigeon is an extinct species of blue pigeon formerly endemic to the Mascarene island of Mauritius in the Indian Ocean east of Madagascar. It has two extinct relatives from the Mascarenes and three extant ones from other islands. It had white hackles around the head, neck and breast and blue plumage on the body, and it was red on the tail and the bare parts of the head. These colours were thought similar to those of the Dutch flag, a resemblance reflected in some of the bird's names. It was 30 cm (12 in) long and larger and more robust than any other blue pigeon species. It could raise its hackles into a ruff, which it used for display. Its call sounded like "barf barf" and it also made a cooing noise. It fed on fruits, nuts, and molluscs, and was once widespread in the forests of Mauritius. The bird was first mentioned in the 17th century and was described several times thereafter, but very few accounts describe the behaviour of living specimens. Several stuffed and at least one live specimen reached Europe in the 1700s and 1800s. Only three stuffed specimens exist today, and only one bird was ever depicted when alive. The species is thought to have become extinct in the 1830s due to deforestation and predation. (Full article...)
Recently featured: Action of 1 January 1800 – Terang Boelan – Muckaty Station............................................................................................................................................................................

The Mauritius Blue Pigeon is an extinct species of blue pigeon formerly endemic to the Mascarene island of Mauritius in the Indian Ocean east of Madagascar. It has two extinct relatives from the Mascarenes and three extant ones from other islands. It had white hackles around the head, neck and breast and blue plumage on the body, and it was red on the tail and the bare parts of the head. These colours were thought similar to those of the Dutch flag, a resemblance reflected in some of the bird's names. It was 30 cm (12 in) long and larger and more robust than any other blue pigeon species. It could raise its hackles into a ruff, which it used for display. Its call sounded like "barf barf" and it also made a cooing noise. It fed on fruits, nuts, and molluscs, and was once widespread in the forests of Mauritius. The bird was first mentioned in the 17th century and was described several times thereafter, but very few accounts describe the behaviour of living specimens. Several stuffed and at least one live specimen reached Europe in the 1700s and 1800s. Only three stuffed specimens exist today, and only one bird was ever depicted when alive. The species is thought to have become extinct in the 1830s due to deforestation and predation. (Full article...)
Recently featured: Action of 1 January 1800 – Terang Boelan – Muckaty Station............................................................................................................................................................................
</div>
<div id="hover2"> HOVER ME </div>​

CSS：

#hover{
   width:200px;
   height:20px;
 border:1px solid #cc0000;   
}
#hover2{
   width:200px;
   height:20px;
 border:1px solid #cc0000;   
}
#container{
  width:500px;
  height:300px;
 overflow-y:auto;   
    border:1px solid #000;
    overflow: hidden;
}
#container div{
  width:100px;
height:100px;    
    float:left;
}​

JAVASCRIPT：

$('#hover').hover(function(){
    $('#container').animate({ scrollTop: $('#container')[0].scrollHeight }, 1000);
});
$('#hover2').hover(function(){
    $('#container').animate({ scrollTop: 0 }, 1000);
});     

推荐答案

你需要一次动画一点..

You need to animate a little bit at a time..

var amount = '';

function scroll() {
  $('#container').animate({
    scrollTop: amount
  }, 100, 'linear', function() {
    if (amount != '') {
      scroll();
    }
  });
}
$('#hover').hover(function() {
  amount = '+=10';
  scroll();
}, function() {
  amount = '';
});
$('#hover2').hover(function() {
  amount = '-=10';
  scroll();
}, function() {
  amount = '';
});

#hover {
  width: 200px;
  height: 20px;
  border: 1px solid #cc0000;
}

#hover2 {
  width: 200px;
  height: 20px;
  border: 1px solid #cc0000;
}

#container {
  width: 500px;
  height: 300px;
  overflow-y: auto;
  border: 1px solid #000;
  overflow: hidden;
}

#container div {
  width: 100px;
  height: 100px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hover"> HOVER ME </div>

<div id="container">

  The Mauritius Blue Pigeon is an extinct species of blue pigeon formerly endemic to the Mascarene island of Mauritius in the Indian Ocean east of Madagascar. It has two extinct relatives from the Mascarenes and three extant ones from other islands. It
  had white hackles around the head, neck and breast and blue plumage on the body, and it was red on the tail and the bare parts of the head. These colours were thought similar to those of the Dutch flag, a resemblance reflected in some of the bird's
  names. It was 30 cm (12 in) long and larger and more robust than any other blue pigeon species. It could raise its hackles into a ruff, which it used for display. Its call sounded like "barf barf" and it also made a cooing noise. It fed on fruits, nuts,
  and molluscs, and was once widespread in the forests of Mauritius. The bird was first mentioned in the 17th century and was described several times thereafter, but very few accounts describe the behaviour of living specimens. Several stuffed and at
  least one live specimen reached Europe in the 1700s and 1800s. Only three stuffed specimens exist today, and only one bird was ever depicted when alive. The species is thought to have become extinct in the 1830s due to deforestation and predation. (Full
  article...) Recently featured: Action of 1 January 1800 – Terang Boelan – Muckaty Station............................................................................................................................................................................
  The Mauritius Blue Pigeon is an extinct species of blue pigeon formerly endemic to the Mascarene island of Mauritius in the Indian Ocean east of Madagascar. It has two extinct relatives from the Mascarenes and three extant ones from other islands. It
  had white hackles around the head, neck and breast and blue plumage on the body, and it was red on the tail and the bare parts of the head. These colours were thought similar to those of the Dutch flag, a resemblance reflected in some of the bird's
  names. It was 30 cm (12 in) long and larger and more robust than any other blue pigeon species. It could raise its hackles into a ruff, which it used for display. Its call sounded like "barf barf" and it also made a cooing noise. It fed on fruits, nuts,
  and molluscs, and was once widespread in the forests of Mauritius. The bird was first mentioned in the 17th century and was described several times thereafter, but very few accounts describe the behaviour of living specimens. Several stuffed and at
  least one live specimen reached Europe in the 1700s and 1800s. Only three stuffed specimens exist today, and only one bird was ever depicted when alive. The species is thought to have become extinct in the 1830s due to deforestation and predation. (Full
  article...) Recently featured: Action of 1 January 1800 – Terang Boelan – Muckaty Station............................................................................................................................................................................
</div>
<div id="hover2"> HOVER ME </div>

演示 http://jsfiddle.net/gaby/xmAvh/

这篇关于将鼠标悬停在图像上时，以受控方式滚动div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！