Center div within scroll

Question

Center div within scroll

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have a parent div that has scroll enabled and a width limit, underneath it I have another div with content.

I want to centralize this content in relation to 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;
}

link

In this way only 0 appear but in the centralized way would appear the 1 also.

Are there any tricks in CSS or jQuery / JavaScript to accomplish such?

javascript jquery css

asked by anonymous 20.01.2017 / 13:26

2 answers

Doubts with DAO method Div positioning with jquery

score 1 · Answer 1

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

Then I divided it by 2 to get half of div.srcoll .

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

And then I used the scrollLeft(); function.

$(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><divclass="scroll">
  <div class="content">
    0000000000000000011100000000000000000
  </div>
</div>

score 1 · Answer 2

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

For this you can use the .scrollTo() javascript method by 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 in horizontal (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, just changing 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><divclass="scroll">
   <div class="content">
      00000000000000000111000000000000000000
   </div>
</div>

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