title: How can I make this javascript marquee manually scrollable?
body: <p>I am trying to make an automatic scrolling marquee using javascript and CSS but, I also want to be able to manually scroll the marquee with the mouse wheel. The marquee functions as expected ie. it scrolls automatically and loops well but I can't figure out how to incorporate manual scrolling. Here is the code that I am using. Any ideas?</p>
  <pre><code>&lt;doctype HTML&gt;
  &lt;body onload=&quot;init()&quot;&gt;
      &lt;main&gt;
          &lt;div id=&quot;marquee_replacement&quot; class=&quot;scrollbar&quot; onmouseout=&quot;startit();&quot; onmouseover=&quot;stop();&quot;&gt;
              &lt;p&gt;some text some text some text some text some text some text some text some text&lt;/p&gt;
              &lt;p&gt;some text some text some text some text some text some text some text some text&lt;/p&gt;
              &lt;p&gt;some text some text some text some text some text some text some text some text&lt;/p&gt;  
              &lt;p&gt;images are also present&lt;/p&gt;
              &lt;p class=&quot;spacer&quot;&gt;&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;script type=&quot;text/javascript&quot;&gt;
              //
              var speed = 2; // change scroll speed with this value
              /**
               * Initialize the marquee, and start the marquee by calling the marquee function.
               */
              function init() {
                  var el = document.getElementById(&quot;marquee_replacement&quot;);
                  el.style.overflow = 'hidden'; //issue is fixed by setting this to auto
                  scrollFromBottom();
              }
  
              var go = 0;
              var timeout = '';
              /**
               * This is where the scroll action happens.
               * Recursive method until stopped.
               */
              function scrollFromBottom() {
                  clearTimeout(timeout);
                  var el = document.getElementById(&quot;marquee_replacement&quot;);
                  if (el.scrollTop &gt;= el.scrollHeight - 150) {
                      el.scrollTop = 0;
                  };
                  el.scrollTop = el.scrollTop + speed;
                  if (go == 0) {
                      timeout = setTimeout(scrollFromBottom, 50);
                  };
              }
  
              /**
               * Set the stop variable to be true (will stop the marquee at the next pass).
               */
              function stop() {
                  go = 1;
              }
  
              /**
               * Set the stop variable to be false and call the marquee function.
               */
              function startit() {
                  go = 0;
                  scrollFromBottom();
              }
          &lt;/script&gt;
  
          &lt;!--CSS for Marquee--&gt;
          &lt;style type=&quot;text/css&quot;&gt;
              #marquee_replacement.scrollbar {
                  width: auto;
                  height: 150px;
                  overflow-y: scroll; /*issue is fixed by setting this to auto*/
              }
  
              .scrollbar::-webkit-scrollbar {
                  display: none;
              }
  
              #marquee_replacement {
                  -ms-overflow-style: none;
                  /* IE and Edge */
                  scrollbar-width: none;
                  /* Firefox */
              }
  
              #marquee_replacement p.spacer {
                  height: 150px;
              }
          &lt;/style&gt;
      &lt;/main&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Edit:
  Sorry for the newbie mistake of not providing a minimal reproducible example. I will update the code above to provide an MREX so that the issue is easier to understand for future readers. Also, I solved the issue. If I set the overflow values in both CSS and javascript portions to auto instead of scroll and hidden respectively it works as an auto-scrolling marquee and manual scrolling text box.</p>