CODEWITHSUNDEEP
javascriptscroll
lobjc
lobjc

Reputation: 2961

js override scroll down when using manual scroll

I'm using the code below to scroll through different divs after a timed period. However, the page keeps sliding back to bottom div when manually scrolling back up. Is there a way to use this code but override the automatic slide back, where I can manually scroll to any div without it jumping back to the bottom before I finish reading what is in that div.

<style id="compiled-css" type="text/css">
      #scroller {
      overflow-y:scroll;
      padding:0;
      margin:0
      border:1px solid #eee;
      width:100%;
      height:500px;
  }

  </style>

<body>
    <div id="scroller">    
    <div style="width:50%;height:50%;background:#ff0000"></div>    
    <div style="width:50%;height:50%;background:#00ff00"></div>    
    <div style="width:50%;height:100%;background:#0000ff"></div>    
    <!--div style="width:50%;height:50%;background:#ff00ff"></div>
    <div style="width:50%;height:50%;background:#ffff00"></div-->
</div>

Status: <span id="status">1</span>
<script type="text/javascript">

  var scrollingUp = 0;
  window.setInterval(scrollit, 3000);
  function scrollit() {
      if(scrollingUp == 0) {
          $('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 500 }, 'slow');
          }
      }
</script>

Upvotes: 1

Views: 305

Answers (1)

ikiK
ikiK

Reputation: 6532

Took me a while for this to figure it out.

Basically, you make it run on a class and set a function with timeout so that after the scrolling animation, function removes that class from a div. That way when it wants to run again it doesn't have anything to run on. And scrolling stops.

Hope this helps.

  var scrollingUp = 0;
  window.setInterval(scrollit, 3000);
  function scrollit() {
      if(scrollingUp == 0) {
          $('.scroller').delay(2000).animate({ scrollTop: $(".scroller").scrollTop() + 500 }, 'slow');
          }
      };    
setInterval(function(){ $("#scroller" ).removeClass("scroller"); }, 3000);     
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style id="compiled-css" type="text/css">
      #scroller {
      overflow-y:scroll;
      padding:0;
      margin:0
      border:1px solid #eee;
      width:100%;
      height:500px;
  }

  </style>

<body>
    <div id="scroller" class="scroller">    
    <div style="width:50%;height:50%;background:#ff0000"></div>    
    <div style="width:50%;height:50%;background:#00ff00"></div>    
    <div style="width:50%;height:100%;background:#0000ff"></div>    
    <!--div style="width:50%;height:50%;background:#ff00ff"></div>
    <div style="width:50%;height:50%;background:#ffff00"></div-->
</div>

Status: <span id="status">1</span>

Upvotes: 1

Related Questions