I am currently working on creating a vertical scroller and have got so far

Question

0

Asked: May 24, 20262026-05-24T13:26:16+00:00 2026-05-24T13:26:16+00:00

I am currently working on creating a vertical scroller and have got so far

0

I am currently working on creating a vertical scroller and have got so far but have got stuck on some of the functionality

My HTML looks like this

<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>

My CSS is as follows

*{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;}

and finally my 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;
}
  );

  });

Currently the scroller moves up and down when you hover over the top and bottom buttons however you have to keep moving in and out of the hover area in order to get the scroller to move

My question is how can you make it so that it will do a continous scroll of the scroll-content div

Also currently the script has no way to limit the end of the scroll-content div and I cant seem to get it to stop once it gets to the bottom of this div

Any ideas are grateful

Cheers