Achieve a smooth scroll effect on a div's content when hovering over an image

Question

Achieve a smooth scroll effect on a div's content when hovering over an image

I am facing a challenge with a div element that has limited height and width, but its content exceeds the size of the div. To address this, I have placed two images at the top and bottom of the div. My intention is to allow the content to scroll up and down based on the image I hover over. While I have managed to achieve the hovering effect, it seems uncontrolled as the scrolling continues till the end even if I move my mouse away from the image. I would like the scrolling to stop immediately when I move my mouse away, and resume from where it left off when I hover over the image again. 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. ...

# CSS code removed for brevity

JAVASCRIPT:

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

javascript jquery html css scroll

Answer 1

Answer №1

In order to create a smooth animation effect, it is best to animate in small increments.

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">

  <...Content about the Mauritius Blue Pigeon...>

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

Check out the demo at http://jsfiddle.net/gaby/xmAvh/

Answer 2

In order to create a smooth animation effect, it is best to animate in small increments.

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">

  <...Content about the Mauritius Blue Pigeon...>

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

Check out the demo at http://jsfiddle.net/gaby/xmAvh/

Achieve a smooth scroll effect on a div's content when hovering over an image

Answer №1

Similar questions

Retrieve the value from an object using a dot notation in its title

Experiencing challenges in integrating fundamental Javascript elements on a chat page

Encountering issues when trying to show a JSON-formatted list on an HTML page, preventing it

What could be the reason for the malfunction of this angular binding?

Add more functionality to the server.js script

What causes .obj files to not respond to directional light in three.js?

Utilize the WebGLRenderTarget again

A method of iteration that allows us to traverse through an object, regardless of whether it contains a single item or an array of items, is known as dynamic looping

Angular cookies may expire, but using the back button always revives them

Navigation and Cart Menu Issue: Inability to Expand or Collapse

While developing a scene switch program in JavaFX, I encountered an error when attempting to switch scenes. Interestingly, the error disappears when CSS is not used – the program works perfectly without

How to toggle the visibility of specific div elements within a v-for loop depending on their content?

The functionality of the Bootstrap carousel appears to be malfunctioning

"Enhance Your Text Fields with Angular2 Text Masks for Added Text Formatting

Issues with events not properly attaching to elements within Angular Directives

Loading data from the database to populate DropDownListFor

Endless scrolling with redux and react

Vitest does not currently support the experimental syntax 'jsx' in use

What is the correct way to specify a property for a Type within a function component? Issue TS2339 encountered

Discovering the most efficient route among a collection of objects in JavaScript