how to know when a div scroll horizontally has reached an end

Question

What i really want to achieve is to detect when a div has scroll to the end and therefore return it to the beginning of the div. when the div is scroll automatically i want to set the left to 0 and therefore return to the beginning of the div, and when the div is control by prev and next button to stop when it get's to the end left and stop when it get's to the right end. but the little piece of code i've got all i could achieve is to scroll it left and right but can stop it when it reach an end, Any help on how to do this will be appreciated, thanks

 var sliderWidth = $(".dialyDealSlider").width();


var ddslider = $(".dialyDealSlider");
 var BoxWidth = $(".dialyDealBox").width();
 $(".ddslider-prev").click(function() {
   //alert(BoxWidth);
   var leftPos = ddslider.scrollLeft();
   var newWidth = leftPos - BoxWidth;
   alert(BoxWidth);
   ddslider.animate({
     left: "-=" + newWidth + "px"
   }, 800);
 });

 $(".ddslider-next").click(function() {
   //alert('next');
   var leftPos = ddslider.scrollLeft();
   var newWidth = leftPos + BoxWidth;
   alert(newWidth);
   ddslider.animate({
     left: "-=" + newWidth + "px"
   }, 800);

 });


 dailyDeal();

 function dailyDeal(finalWidth) {
   var timer;
   clearTimeout(timer);
   scrollWidth = $(".dialyDealBox").width();
   leftPosi = $(".dialyDealSlider").scrollLeft();
   scrollWidth = leftPosi + scrollWidth;
   $(".dialyDealSlider").animate({
     left: "-=" + scrollWidth + "px"
   }, 800);

   timer = setTimeout(dailyDeal, 3000);
 }

JS FIDDLE https://jsfiddle.net/sammyzeal/dcxvLgm0/

Answer 1

Here two examples of what I think you are looking for:

http://qnimate.com/detecting-end-of-scrolling-in-html-element/

How to detect the end of a horizontal scroll in a div?

Both are quite clear to help you to achieve it.

The code from the first link:

<script type="text/javascript">
    function scrolled(o)
    {
        //visible height + pixel scrolled = total height 
        if(o.offsetHeight + o.scrollTop == o.scrollHeight)
        {
            alert("End");
        }
    }
</script>