jQuery addClass example

Change class name on click in jQuery

by Dogbert

HTML

<div id="thing">
  <img src="https://loremflickr.com/cache/resized/4595_39426338112_325fef52c9_h_227_1280_nofilter.jpg">
</div>

CSS

body {
  background: #20262E;
  padding: 2rem;
}

#thing {
  background: #fff;
  border-radius: 4px;
  padding: 2rem;
  margin: 0 auto;
  width: 300px;
  height: 200px;
  overflow-y: scroll;
  text-align: center;
}

JavaScript

var speed = 1, on = false;

$("#thing").on("mousemove", function(ev) {
  var rect = $("#thing")[0].getBoundingClientRect();
  console.log(ev.pageY - rect.top, rect.height);
  var ratio = (ev.pageY - rect.top )/ rect.height;
  speed = (ratio - .5) * 20;
})

$("#thing").on("mouseover", function() {
	on = true;
})
$("#thing").on("mouseout", function() {
	on = false;
})

setInterval(function() {
//console.log({on, speed});
if(on)
	$("#thing").scrollTop($("#thing").scrollTop() + speed);
}, 16)