Auto scrollTop / scrollBottom

by aburayane

HTML

<ul class="mm" id="list">
    <li>item1</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item3</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item5</li>
    <li>item</li>    
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item8</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>    
    <li>item</li>
    <li>item</li>
    <li>item10</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item15</li>
</ul>

CSS

.mm {
  overflow-y:scroll; 
  height: 150px; 
  border: 1px solid black;
  list-style-type: none;
  padding: 0px;
}

JavaScript

var yy = $('.mm').scrollTop();
console.log(yy);
var sh	= $('.mm')[0].scrollHeight;
console.log(sh);


$('#list > li').hover(function(e){
var target = e.target;
//console.log(target);
var height = $('ul').height();
console.log('h '+height);

var scrollHeight = $("#list")[0].scrollHeight;
console.log(scrollHeight);

var off = $('#list').offset();
console.log(off);

var offTop = $('#list').offset().top;
console.log(offTop);

var offLeft = $('#list').offset().left;
console.log(offLeft);


	var mouseX = e.pageX;
  var mouseY = e.pageY;
  
  console.log('x:'+mouseX+' y:'+mouseY+ ' h:'+height+' sh:' +scrollHeight);
  
  if(mouseY > height-10){

    $('#list').animate({scrollTop: '+=150px'}, 1500, 'swing');
  }

    

});