Scrollleft Javascript

Question

I set the system, for when the screen is smaller, format the grid, to have horizontal scroll bar, is working perfectly. But beyond the scroll bar, I wanted a button or a link so that when the user clicked the grid would move to the right. I tried that way, but it didn’t work out:

 <script type="text/javascript">
         function move() {
             document.getElementById('mobile').scrollLeft += 30;
         }
 </script>

Here I call the function:

<input name="btnImprimir" type="button" onclick="move();" value="ScrollLeft" />

And I put my Gridview inside the mobile div.

@media only screen and (max-width: 414px) {
    .mobile {
        overflow-x: scroll;
        width: auto;
        height:300px;
    }
}

But when I click the button, no action happens.

Answer 1

I believe the problem is not in your Java or CSS, but in the way you structured your HTML, in this case the only help I can give you is in the form of a functional example.

var mover = document.getElementById("mover");
var painel = document.getElementById("painel");

mover.addEventListener("click", function (event) {
  painel.scrollLeft += 100;
});

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 5px;
  margin: 0px;
  box-sizing: border-box;
}

.painel {
  overflow: auto;  
  height: 150px;
  background-color: teal;
}

.conteudo {
  width: 1500px;
  height: 50px;
}

<div id="painel" class="painel">
  <div class="conteudo">
  </div>
</div>
<input id="mover" type="button" value="Mover Scroll para a Direita" />