Scroll down using Jquery - On Hover

Question

Goal: On hover - scroll down within a div. When the hover stops - stop scrolling within div. This is what I've tried. This works except it only hovers down 150px every time the mouse hovers over #down1. So it's not continuous. Any ideas?

hovered = false;

$("#down1").on({
  mouseenter: function() {
    hover = true;
    if (hover = true) {
      var y = $('#avoidOptions').scrollTop(); //your current y position on the page
      $('#avoidOptions').scrollTop(y + 150);
    }
  },
  mouseleave: function() {
    hover = false;
  }
});

.scrollingOptions {
  height: 30vh;
  width: 100%;
  overflow: auto;
  z-index: 1000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='scrollingOptions' id='avoidOptions'>
  <p class='likeavoid avoid1'>1
  </p>
  <p class='likeavoid avoid2'>2
  </p>
  <p class='likeavoid avoid3'>3
  </p>
  <p class='likeavoid avoid4'>4
  </p>
  <p class='likeavoid avoid5'>5
  </p>
  <p class='likeavoid avoid6'>6
  </p>
  <p class='likeavoid avoid7'>7
  </p>
  <p class='likeavoid avoid8'>8
  </p>
  <p class='likeavoid avoid9'>9
  </p>
  <p class='likeavoid avoid10'>10
  </p>
  <p class='likeavoid avoid11'>11
  </p>
  <br>
</div>
<p class='white text-center' id='down1'> Scroll Down - Hover Here</p>

Please post a full set of working code and HTML that reproduces this issue so we may best assist you with a clear resolution — Mark Schultheiss, Oct 11 '19 at 20:59
For example your `hovered = false;` is not reference anywhere else — Mark Schultheiss, Oct 11 '19 at 21:01

score 2 · Answer 1 · edited Oct 12 '19 at 10:32

An interval timer worked for me:

$("#down1").on({
  mouseenter: function() {
    this.timer = setInterval(function() {
        var y = $('#avoidOptions').scrollTop();  //your current y position on the page
        $('#avoidOptions').scrollTop(y + 150);
    }, 500);
  },
  mouseleave: function() {
    clearInterval(this.timer);
  }
});

setInterval starts the timer, and the function runs after 500 ms and then repeats. Stops with clearInterval. Also, checking if hover is true immediately after setting it to true is unnecessary. I removed that part.

Demo: https://jsfiddle.net/4vco2arg/

$("#down1").on({
  mouseenter: function() {
    this.timer = setInterval(function() {
      var y = $('#avoidOptions').scrollTop(); //your current y position on the page
      $('#avoidOptions').scrollTop(y + 150);
    }, 500);
  },
  mouseleave: function() {
    clearInterval(this.timer);
  }
});

.scrollingOptions {
  height: 30vh;
  width: 100%;
  overflow: auto;
  z-index: 1000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='scrollingOptions' id='avoidOptions'>
  <p class='likeavoid avoid1'>1
  </p>
  <p class='likeavoid avoid2'>2
  </p>
  <p class='likeavoid avoid3'>3
  </p>
  <p class='likeavoid avoid4'>4
  </p>
  <p class='likeavoid avoid5'>5
  </p>
  <p class='likeavoid avoid6'>6
  </p>
  <p class='likeavoid avoid7'>7
  </p>
  <p class='likeavoid avoid8'>8
  </p>
  <p class='likeavoid avoid9'>9
  </p>
  <p class='likeavoid avoid10'>10
  </p>
  <p class='likeavoid avoid11'>11
  </p>
  <br>
</div>
<p class='white text-center' id='down1'> Scroll Down - Hover Here</p>

Mark Schultheiss · Accepted Answer · 2019-10-12T15:58:16.487

Question specific:

If you set an interval to scroll it will continue to fire until you move the mouse off when you can clear that interval using the id that the function returns.

You have if (hover = true) { which should be if (hover === true) { or since it is a boolean simply use that if (hover) { although I do not see a reason to have it for use here.

Note "this" here this.intervalId is the element with #down1 but it works here since we have it in both event handlers, it might be better to use a namespace like var myApp ={intervalId:null,scrollElement:function(scrollTarget, scrollBy) {}}; referenced as myApp.intervalId for that and the called function (and not a global like var intervalId; for example)

Optional:

You can also create a function as I illustrate and call it passing parameters, you might even then be able to reuse that function.

Observations:

I am not a fan of <br /> just to add space so I removed it and added padding at the bottom to the parent instead
Rather than <p></p> consider a <div> with margin or padding to space things
I noted you have a bunch of numbered classes. If you target them for some reason, OK but instead you can also detect the index of an element like for example jQuery has a 0 based index such as $('.likeavoid').index(); or if you know the index value $('.likeavoid').eq(5); to target one
I added an example of storing an interval value in the element markup, if you extend that to all of the values you could then use the same events for more than one element grouping.
You could also smooth the scroll by reference: Smooth scrolling when clicking an anchor link

function scrollElement(scrollTarget, scrollBy) {
  scrollTarget.scrollTop(scrollTarget.scrollTop() + scrollBy);
}
$("#down1").on({
  mouseenter: function(event) {
    // these could also be stored on event.target like I did for the interval
    let scrollAmount = 150; //amount could be stored
    let scrollTarget = $('#avoidOptions'); //id could be stored
    let timeInterval = $(event.target).data("scroll-interval");
    this.intervalId = window.setInterval(scrollElement, timeInterval, scrollTarget, scrollAmount);
  },
  mouseleave: function(event) {
    window.clearInterval(this.intervalId);
  }
});

.scrollingOptions {
  height: 30vh;
  width: 100%;
  overflow: auto;
  z-index: 1000;
  padding-bottom: 1em;
}

.scroller {
  border: solid 1px #EEEEEE;
  background-color: #eeffff;
  margin-top: 1em;
}

.likeavoid {
  border: dashed 1px #EEEEEE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='scrollingOptions' id='avoidOptions'>
  <p class='likeavoid avoid1'>1</p>
  <p class='likeavoid avoid2'>2</p>
  <p class='likeavoid avoid3'>3</p>
  <p class='likeavoid avoid4'>4</p>
  <p class='likeavoid avoid5'>5</p>
  <p class='likeavoid avoid6'>6</p>
  <p class='likeavoid avoid7'>7</p>
  <p class='likeavoid avoid8'>8</p>
  <p class='likeavoid avoid9'>9</p>
  <p class='likeavoid avoid10'>10</p>
  <p class='likeavoid avoid11'>11</p>
</div>
<div class='scroller white text-center' id='down1' data-scroll-interval="1000"> Scroll Down - Hover Here</div>

UNTESTED on mobile device: per comment option react on mobile per spec properly. reference https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent

function scrollElement(scrollTarget, scrollBy) {
  scrollTarget.scrollTop(scrollTarget.scrollTop() + scrollBy);
}

function enterHandler(event) {
  // these could also be stored on event.target like I did for the interval
  let scrollAmount = 150; //amount could be stored
  let scrollTarget = $('#avoidOptions'); //id could be stored
  let timeInterval = $(event.target).data("scroll-interval");
  this.intervalId = window.setInterval(scrollElement, timeInterval, scrollTarget, scrollAmount);
  event.preventDefault();
}

function leaveHandler(event) {
  window.clearInterval(this.intervalId);
  event.preventDefault();
}
$("#down1")
  .on('touchstart', enterHandler).on('touchend', leaveHandler)
  .on('mouseenter', enterHandler).on('mouseleave', leaveHandler);

.scrollingOptions {
  height: 30vh;
  width: 100%;
  overflow: auto;
  z-index: 1000;
  padding-bottom: 1em;
}

.scroller {
  border: solid 1px #EEEEEE;
  background-color: #eeffff;
  margin-top: 1em;
}

.likeavoid {
  border: dashed 1px #EEEEEE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='scrollingOptions' id='avoidOptions'>
  <p class='likeavoid avoid1'>1</p>
  <p class='likeavoid avoid2'>2</p>
  <p class='likeavoid avoid3'>3</p>
  <p class='likeavoid avoid4'>4</p>
  <p class='likeavoid avoid5'>5</p>
  <p class='likeavoid avoid6'>6</p>
  <p class='likeavoid avoid7'>7</p>
  <p class='likeavoid avoid8'>8</p>
  <p class='likeavoid avoid9'>9</p>
  <p class='likeavoid avoid10'>10</p>
  <p class='likeavoid avoid11'>11</p>
</div>
<div class='scroller white text-center' id='down1' data-scroll-interval="1000"> Scroll Down - Hover Here</div>

Amazing Mark! Thank you for all of the attention to detail. Massively helpful! — AndrewLeonardi, Oct 12 '19 at 15:25
Note for mobile usage: You can replace "mouseenter / mouseleave" with "touchstart / touchend" — AndrewLeonardi, Oct 12 '19 at 15:28
I added a note and example (untested on mobile) that should work, note sequence of the mobile is first. — Mark Schultheiss, Oct 12 '19 at 15:59

Manjiri K · Answer 3 · 2019-10-11T21:17:19.797

1

In the setInterval(function, time) you can decide time based on how smoothly you want to scroll. Here I have used 100. If you are not using hover variable anywhere else in your code then you can remove it. coz it is not playing any role in scrolling down.

var hover = false;
var scrollInterval = null;

$("#down1").on({
mouseenter: function () {

    hover = true;

    scrollInterval = setInterval(function (){
        var y = $('#avoidOptions').scrollTop();  //your current y position on the page
        $('#avoidOptions').scrollTop(y + 150)
    }, 100);


},
mouseleave: function () {
    hover = false;
    clearInterval(scrollInterval)
    }
});

edited Oct 11 '19 at 21:17

answered Oct 11 '19 at 20:56

Manjiri K

126
8

`scrollInterval;` is not a proper declaration perhaps you can improve this answer with a working example – Mark Schultheiss Oct 11 '19 at 21:03
Thanks!! I improved my answer, let me know if you think this is correct. – Manjiri K Oct 11 '19 at 21:07
Seems to have a bit of an issue if the user tries to scroll back up. On the right track though thank you :) – AndrewLeonardi Oct 11 '19 at 21:12
1

`hover = true; if ( hover = true) {` hover here is ALWAYS true and `(hover = true)` assigns it again.. – Mark Schultheiss Oct 11 '19 at 21:13
Yeah I wrote a note regarding that, but let me edit my answer then if that is not going to be used anywhere else in the code. – Manjiri K Oct 11 '19 at 21:15

Svdb · Answer 4 · 2019-10-12T14:05:23.517

0

You can probably do this with a short interval timer

window.setInterval(function(){
  /// call your function here
}, 500);

To stop the timer you can use

clearInterval()

It should look something like this

var scroll;

$("#down1").on({
  mouseenter: function() {
      scroll = window.setInterval(function() {
          var y = $('#avoidOptions').scrollTop();
          $('#avoidOptions').scrollTop(y + 150);
      }, 500);
    }
  },
  mouseleave: function() {
    clearInterval(scroll);
  }
});

edited Oct 12 '19 at 14:05

answered Oct 11 '19 at 20:43

Svdb

337
3
14

answer has what appears to be a typo – Mark Schultheiss Oct 12 '19 at 11:48

Scroll down using Jquery - On Hover

4 Answers4

Question specific:

Observations: