Jquery Вертикальный контент-скроллер

Question

В настоящее время я работаю над созданием вертикального скроллера и до сих пор дошел, но застрял на некоторых функциях

Мой HTML выглядит следующим образом

<div class="outer">

    <div class="slider-content clearfix">
        <ul>
        <li><img src="images/img1.jpg" width="200" height="200" alt="img1"></li>
        <li><img src="images/img2.jpg" width="210" height="200" alt="img2"></li>
        <li><img src="images/img3.jpg" width="220" height="210" alt="img3"></li>
        <li><img src="images/img4.jpg" width="210" height="200" alt="img4"></li>
        <li><img src="images/img5.jpg" width="200" height="200" alt="img5"></li>
        <li><img src="images/img6.jpg" width="210" height="200" alt="img6"></li>
        <li><img src="images/img7.jpg" width="220" height="153" alt="img7"></li>
        <li><img src="images/img8.jpg" width="200" height="200" alt="img8"l></li>
        <li><img src="images/img9.jpg" width="200" height="200" alt="img9"></li>
        <li><img src="images/img10.jpg" width="200" height="200" alt="img10"></li>
        <li><img src="images/img11.jpg" width="200" height="200" alt="img11"></li>
        <li><img src="images/img12.jpg" width="200" height="200" alt="img12"></li>
        <li><img src="images/img13.jpg" width="220" height="210" alt="img13"></li>
        </ul>
    </div>

</div>

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

Мой CSS такой же, какследует

*{margin:0px;padding:0px;}
 li{list-style:none;float:left;height:200px;width:200px;}
.clearfix { overflow: hidden; display: inline-block; }
.clearfix { display: block; }
.outer{margin:45px auto;position:relative;height:500px;width:515px;border:1px solid  #333;overflow:hidden;}
.slider-content{position:absolute;top:0px;left:0px;}
.top-hover, .bottom-hover{width:515px;height:50px;background:#ccc;}
.top-hover{position:absolute;top:0px;z-index:500;}
.bottom-hover{position:absolute;bottom:0px;}

и, наконец, мой JS

$(function(){

$('.outer').prepend('<div class="top-hover"></div>');
$('.slider-content').after('<div class="bottom-hover"></div>'); 

//Get height of outer container and slider
var outerHeight = $('div.outer').height();
var contentHeight = $('div.slider-content').height();
// Calculate cut off point of displayed contents
var contentExcess = contentHeight - outerHeight;
//store end point of scroll
var maxTopScroll = 0 - contentExcess
var speed = 45;
var hovered = false;


//Hover over top div
$('div.top-hover').hover(
function(){

    //Get the position of the slider content div and store in sliderPositionTop
    var sliderPositionTop = $('.slider-content').position().top;
    // if slider position is less than 0 animate down
    if(sliderPositionTop < 0){
         // alert(sliderPositionTop);
        $('.slider-content').animate({
            top: sliderPositionTop + speed
        });

    } else {
        //If slider is greater than 0 stop animation
            if(sliderPositionTop > 0){
                $('div.top-hover').stop();
                $('.slider-content').css('top', '0px');
            }
         alert('No movement');
    }   
},
function(){
    return false;
  });




 //Hover over bottom div
 $('div.bottom-hover').hover(
function(){
    //Get the position of the slider content div and store in    sliderPositionBottom
    var sliderPositionBottom = $('.slider-content').position().top;
    // If slider is less / equal to 0 then animate slider
        if(sliderPositionBottom <= 0){
             // alert(sliderPositionBottom);
            $('.slider-content').animate({
                top: sliderPositionBottom - speed   
            }); 
        } else {
            //If scroll reaches max then stop
             alert('No movement');
        }
},
function(){
    return false;
}
  );

  });

В настоящее время скроллер перемещается вверх и вниз при наведении курсора на верхнюю и нижнюю кнопки, однако вы должны продолжать двигаться в и изобласть наведения для перемещения скроллера

Мой вопрос: как вы можете сделать так, чтобы он делал непрерывную прокрутку div scroll-content

Также в настоящее время скрипт не имеетспособ ограничить конец элемента прокрутки с содержимым, и я не могу заставить его остановиться, когда он достигнет сути этого раздела

Любые идеи благодарны

Приветствия

Answer 1

Я думаю, что плагин jquery jScrollPane имеет именно то, что вы ищете.Он легко обрабатывается с помощью css и имеет множество примеров.

jScrollPane - пример наведения стрелки http://jscrollpane.kelvinluck.com/arrow_hover.html