ScrollLeft JavaScript

Question

ScrollLeft JavaScript

Navigation

#1 by (1 votes)

0

I configured the system, when the screen is smaller, format the grid, to have horizontal scroll bar, is working perfectly. But besides the scrollbar, I wanted a button or a link so that when the user clicked the grid it would move right. I tried that way, but it's not working:

 <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 div mobile.

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

But when I click the button, nothing happens.

javascript c#

asked by anonymous 24.05.2017 / 19:17

1 answer

What dependency on Demoiselle 3 should be included in a Maven project for JSF use? Body NULL NodeJS

score 1 · Answer 1

I believe the problem is not in your javaScript or CSS, but in the way you have structured your HTML, in this case the only help I can give you is in the form of a working 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" />