title: Horizontal scroll loop in Cargo Collective
body: <p>I'm trying to add an horizontal loop to my page but when I try to add the javascript cargo tells me that the script has been disabled. Why does that happen? Is there a way to implement that java without having problems? Is it right to add the javascript in the tag script at the end? This is where I've took the code from: <a href="https://codepen.io/lemmin/pen/bqNBpK" rel="nofollow noreferrer">https://codepen.io/lemmin/pen/bqNBpK</a></p>
  <p>HTML:</p>
  <pre><code>&lt;div id=&quot;page&quot;&gt;
    &lt;div class=&quot;pane&quot;&gt;&lt;div&gt;Looping Horizontal Scroll&lt;/div&gt;&lt;/div&gt;
    &lt;div class=&quot;pane&quot;&gt;&lt;div&gt;2&lt;/div&gt;&lt;/div&gt;
    &lt;div class=&quot;pane&quot;&gt;&lt;div&gt;3&lt;/div&gt;&lt;/div&gt;
    &lt;div class=&quot;pane&quot;&gt;&lt;div&gt;4&lt;/div&gt;&lt;/div&gt;
    &lt;div class=&quot;pane&quot;&gt;&lt;div&gt;5&lt;/div&gt;&lt;/div&gt;
    &lt;div class=&quot;pane&quot;&gt;&lt;div&gt;Last&lt;/div&gt;&lt;/div&gt;
    &lt;div class=&quot;pane&quot;&gt;&lt;div&gt;Looping Horizontal Scroll&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>body{
    overflow-x:hidden;
    color:#FFF;
    font-family:Helvetica;
    font-size:200%;
  }
  
  #page {
    overflow:hidden;
    white-space:nowrap;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#CCC;
    display:flex;
    flex-wrap:no-wrap;
  }
  .pane {
    flex:0 0 100vw;
    height:100vh;
    display:flex;
    position:relative;
    align-items:center;
    justify-content:center;
    background-color: #45CCFF;
  }
  
  .pane:nth-child(4n+2)  {
    background-color: #49E83E;
  }
  .pane:nth-child(4n+3)  {
    background-color: #EDDE05;
  }
  .pane:nth-child(4n+4)  {
    background-color: #E84B30;
  }
  .pane:last-child {
    background-color: #45CCFF;
  }
  </code></pre>
  <p>JS:</p>
  <pre><code>&lt;script&gt;
  var page = document.getElementById('page');
  var last_pane = page.getElementsByClassName('pane');
  last_pane = last_pane[last_pane.length-1];
  var dummy_x = null;
  
  window.onscroll = function () {
    var y = document.body.getBoundingClientRect().top;
    page.scrollLeft = -y;
    
    var diff = window.scrollY - dummy_x;
    if (diff &gt; 0) {
      window.scrollTo(0, diff);
    }
    else if (window.scrollY == 0) {
      window.scrollTo(0, dummy_x);
    }
  }
  // Adjust the body height if the window resizes.
  window.onresize = resize;
  // Initial resize.
  resize();
  
  // Reset window-based vars
  function resize() {
    var w = page.scrollWidth-window.innerWidth+window.innerHeight;
    document.body.style.height = w + 'px';
    
    dummy_x = last_pane.getBoundingClientRect().left+window.scrollY;
  }
  &lt;/script&gt;
  </code></pre>