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

目前还有脚本没有办法限制结束滚动内容 div，一旦它到达该 div 的底部，我似乎无法让它停止

任何想法都很感激

干杯

Answer 1

我认为 jquery jScrollPane 插件正是您所寻找的。它很容易用 CSS 进行换肤，并且有很多示例。

jScrollPane - 箭头悬停示例
http://jscrollpane.kelvinluck.com/arrow_hover.html