Change scrollbar placement in a div

Navigation
2

By default, in a horizontal menu the content is read from left to right, as in this image:

However,Iwouldlikethatwhenthecontentloads,thescrollbaris,say,automaticallymovedtotheright,asinthisimage:

Is this possible?

    
asked by anonymous 17.10.2018 / 19:05

3 answers

2

If you're using jQuery, you can use the scrollLeft() method. An example: 

$('.btn').on('click', function () {
  var $target = $('.content');
  $target.scrollLeft($target.outerWidth() + 20);
});
.content {
  border: solid 1px #000;
  padding: 1rem;
  max-width: 500px;
  overflow-x: auto;
  white-space: nowrap;
}

.btn {
  margin-top: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet turpis lacus. Curabitur efficitur est mi, in fermentum arcu lobortis ut.
</div>

<button class="btn">Clique-me</button>

In your case, just change the click event to when the page loads: 

$(function () {
  var $target = $('seletor-do-elemento');
  $target.scrollLeft($target.outerWidth() + 20);
});

Reference:

17.10.2018 / 19:34
3

You can use flex-direction: row-reverse; to indicate that the order of elements will start from brings forward , so scroll goes to the end of container . All you have to do is to reorder the div to suit you.

See how it looks in the example: 

.container {
  width: 500px;
  overflow-x: scroll;
  background-color: #ddd;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
}
.item {
  min-width: 150px;
  height: 50px;
  background-color: #f00;
  margin: 5px;
}
<div class="container">
  <div class="item">6</div>
  <div class="item">5</div>
  <div class="item">4</div>
  <div class="item">3</div>
  <div class="item">2</div>
  <div class="item">1</div>
</div>
    
17.10.2018 / 19:27
2

A more direct way to do this with javascript is: 

var element = document.getElementById('ID-DO-ELEMENTO');
element.scrollTo(element.scrollWidth, 0);
    
17.10.2018 / 19:28
How to connect Windows Phone to a SQL Server? how to make a div appearing following the cursor?