Hello, I am new to JS, so perhaps the question will seem trivial, but I can not understand why the results of arithmetic calculations in JS are approximate. There is a need to calculate the width of the window and the scroll bar, and then when the scroll bar disappears, move the block to the left to the width of the scroll bar. In general, there is a code

var body_width = ($(window).width() / 2); $('.head_text').css({'position': 'relative', 'left': - (getScrollbarWidth()/2)});

but the result in the browser is not expected, the block is additionally shifted by a few more pixels. With what it can be connected? Thank!

UPD: Thank you all, everything turned out to be simpler, I did not take into account the initial shift of the blocks, it's not about JS. I managed to implement the correct version of hiding the scrollbar without content bias as follows http://jsfiddle.net/Romanzhivo/33pw51hc/7/ I would be grateful for a less cumbersome and more elegant solution.

  • 3
    You need HTML markup (very minimum, so that you can reproduce the body of the getScrollbarWidth () function. If you solve a problem with modal windows, then most likely you need just css. - Robert Dampilon
  • Yes, the task with modal windows (slider). Unfortunately, I tried almost everything in css, the task is that the body hides a scrollbar when a slider appears, but at the same time the block itself does not “jerk”, that is, the content remains visually in place. - Romanzhivo

2 answers 2

There may be a problem with the getScrollbarWidth () method.

If you use the function when calculating the width:

 var scrollWidth = div.offsetWidth - div.clientWidth;

Make sure that your element ("div") does not have stylistic properties "margin" and "padding".

  • Thank! You were right) JS probably thinks everything correctly, but instead of margin and padding, I initially set the left: 19px shift to css, and when the scrollbar was hidden, it was necessary to have 'left': - (getScrollbarWidth () / 2) add those 19px - Romanzhivo

I think you don’t need JS if you are using bootstrap, but most likely this is it. The problem is solved in different ways, depending on your HTML markup, and CSS, here is one of the solutions:

  body { overflow-y: scroll; } body.modal-open { overflow-y: scroll; margin: 0; } .modal { overflow: auto; }

PS: Perhaps this solution will not suit you personally, but others are possible.

  • His bike) As I understand it, your option does not remove the scrollbar, but solves the problem of displacement. However, there is a possibility that the second scrollbar will appear if the window does not fit in height. In my case, the layout is quite specific, you need to solve all these problems. You may have seen the Vkontakte modal windows, the second scrollbar will not appear, even if the window height changes, but when you open the modal window and a sufficient height, the scrollbar disappears and the background with the content remains in place. In principle, I managed to solve the problem, but a lot of code jsfiddle.net/Romanzhivo/33pw51hc/7 - Romanzhivo