Question : How to make the scrollbar appear to the left?

The bottom line : There is an element that is always centered on the visible area through top , left (50%) and translate (-50%, -50%). But the element has a fixed width and height, respectively, when the size of the visible area is less than the area of ​​the element, part of the element is hidden behind the left side of the browser window, and the scroll bar to the left does not appear.

How can I fix this?

Preferably without third-party js libraries, and indeed without js, if possible.

Closed due to the fact that the essence of the question is incomprehensible by the participants cheops , Lex Hobbit , ilyaplot , Streletz , kizoso Nov 5, '17 at 5:42 pm .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 2
    We need an example of the code, the problem is not clear from the description - Yuri Bezrukov
  • where is the code?: ????? - Air

1 answer 1

Use for centering not translate horizontally but just margin: 0 auto; And the problem will be solved.

 .container { width: 100px; height: 100px; position: relative; overflow: auto; background-color: blue; } .object { position: relative; top: 50%; transform: translateY(-50%); width: 20px; height: 50px; margin: 0 auto; background-color: yellow; border: 1px solid black; } .object2 { position: relative; top: 50%; transform: translateY(-50%); width: 200px; height: 50px; margin: 0 auto; background-color: yellow; border: 1px solid black; } 
 <div class="container"> <div class="object"></div> </div> <div class="container"> <div class="object2"></div> </div>