Center div inside scroll

Question

I have a father div that has the scroll enabled and a width limit, below it I have another div with content.

My wish is to center this content on the parent div so that the content is centralized, note:

<div class="scroll">
<div class="content">
00000000000000000111000000000000000000
</div>
</div>

.scroll {
  overflow:auto;
  width: 100px;
  background-color:black;
}
.content {
  background-color:red;
  display:inline-block;
}

https://jsfiddle.net/b1unhL34/

That way only the 0 but in a centralized way the 1 also.

Are there any tricks in CSS or jQuery/Javascript to accomplish this?

Answer 1

You can use jQuery or JS pure to do this. In case I used jQuery to take the size of the element .content.

So I split it two ways to get halfway through div.srcoll.

The biggest problem is that we have to discount the size of the arrows on the right and left. I kicked some 25px for each, soon 50px.

And then I used the function scrollLeft();.

$(document).ready(function() {
  var scrollMiddle = ($('.content').width() / 2) - 50;
  $('.scroll').scrollLeft(scrollMiddle);
});

.scroll {
  overflow: auto;
  width: 100px;
  background-color: black;
}
.content {
  background-color: red;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll">
  <div class="content">
    0000000000000000011100000000000000000
  </div>
</div>

Answer 2

You can position the scroll exactly in the middle subtracting the width of the largest div by the smallest and dividing by 2.

For this you can use the Javascript method .scrollTo() changing only the first parameter (axis X) and leaving the second parameter (axis Y) with the value 0, since you only want to move the scroll horizontally (axis X):

document.addEventListener("DOMContentLoaded", function(){
   var scrl = document.querySelector(".scroll"); // pega a div de classe .scroll
   var scrlWidth = scrl.offsetWidth; // pega a largura a div de classe .scroll
   var cont = document.querySelector(".content").offsetWidth; // pega a largura da div de classe .content
   scrl.scrollTo( (cont-scrlWidth)/2, 0 ); // move o scroll apenas na horizontal
});

.scroll {
  overflow:auto;
  width: 100px;
  background-color:black;
}
.content {
  background-color:red;
  display:inline-block;
}

<div class="scroll">
   <div class="content">
      00000000000000000111000000000000000000
   </div>
</div>

If you want to use jQuery, the logic is the same, changing only the syntax:

$(document).ready(function(){
   var scrl = $(".scroll"); // pega a div de classe .scroll
   var scrlWidth = scrl.width(); // pega a largura a div de classe .scroll
   var cont = $(".content").width(); // pega a largura da div de classe .content
   scrl.scrollLeft((cont-scrlWidth)/2); // move o scroll apenas na horizontal
});

.scroll {
  overflow:auto;
  width: 100px;
  background-color:black;
}
.content {
  background-color:red;
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll">
   <div class="content">
      00000000000000000111000000000000000000
   </div>
</div>

Note that in the examples the 111 does not appear exactly in the middle because it has 1 zero more to the right than to the left, but the scroll is centralized.