CODEWITHSUNDEEP
javascripthtmlcss
Bimsara Shrestha
Bimsara Shrestha

Reputation: 13

how to make a auto-scrolling horizontal scrollbar

I have a horizontal scrollable section in my page and i want its content to automatically scroll. i tried using the code for automatic vertical scroll but its not working.

code based from here how to make a scrollbar automatically move after sometime (JavaScript)

$(document).ready(function () {
    var scrollHandler = null;
    function autoScroll() {
        clearInterval(scrollHandler);
        scrollHandler = setInterval(function () {
        var nextScroll = $('.menu').scrollLeft() + 20;
        $('.menu').scrollLeft(nextScroll);
        }, 1500);
    }
    autoScroll();
});

what do i need to do to make it work? i am a beginner so please explain. thanks.

Upvotes: 0

Views: 2106

Answers (1)

Lluser
Lluser

Reputation: 256

Here you can see adapted code from the answer your code is based on.

$(document).ready(function() {
  
  var scrollHandler = null;
  
  function autoScroll () {
    console.log("autoScroll");
    clearInterval(scrollHandler);
    scrollHandler = setInterval(function() {
      var nextScroll = $('.scrolled').scrollLeft() + 20;
      $('.scrolled').scrollLeft(nextScroll);
    },500);
  }
   
   autoScroll();
});
.scrolled {
  width: 50%;
  height: auto;
  overflow: scroll;
}

.inside {
  width: 5000%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrolled">
  <div class="inside" >
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Aliquam erat volutpat. Fusce consectetuer risus a nunc. Aliquam ornare wisi eu metus. Mauris tincidunt sem sed arcu. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci.
  </div>
</div>

Upvotes: 1

Related Questions