Avoid right jump of elements with javascript and local variable when hiding vertical scrollbar

Question

I would like to add left margin and right margin to the body to hide the width change when I hide the vertical scrollbar.

I have this code that finds the width of the vertical scrollbar:

    var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
    widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
    $outer.remove();
    var scrollbarwidth = 100 - widthWithScroll;

It gives the value "17" (in pixels) for IE11, Chrome 45, and Firefox 39 (desktop).

When I hide the vertical scrollbar, all elements, such as images, jump exactly 17 pixels to the right, which I want to hide.

I have tried:

    document.body.style.marginRight = scrollbarwidth + "px";

    $('body').css('margin-right', scrollbarwidth);

    $(body).css("marginRight", scrollbarwidth + "px");

The last one might be faulty in some way, since other parts of the function stops working when it's enabled. The two others don't seem to work either, as I don't see any margin changes.

EDIT 1: For easier understanding of how I am going to use it, I wanted to mention that it's supposed to trigger on a on scroll function, like this:

var check1 = false;

$(document).bind('scroll', function() {
    if(check1 === false && $(window).scrollTop() >= $('#divscrolltester').offset().top + $('#divscrolltester').outerHeight() - window.innerHeight) {

    check1 = true;

    unloadScrollBars();
    disableScroll();

    var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
    widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
    $outer.remove();
    var scrollbarwidth = 100 - widthWithScroll;

    //document.body.style.paddingRight = scrollbarwidth + "px"; Temporary disabled.
    //$('body').css('padding-right', scrollbarwidth); Temporary disabled.
    //$(body).css("marginRight", scrollbarwidth + "px"); Temporary disabled.

    setTimeout(function() {
    enableScroll();
    reloadScrollBars();

    //document.body.style.paddingLeft = scrollbarwidth + "px"; Temporary disabled.
    //$('body').css('padding-left', scrollbarwidth); Temporary disabled.
    //$(body).css("marginLeft", scrollbarwidth + "px"); Temporary disabled.

    }, 500);

   }   
});

EDIT 2:

Here is a Fiddle to show most of the js, html and css: https://jsfiddle.net/tfnwj7dj/10/.

I haven't added the change of css through code yet, as I'm still trying to solve the issue. Also, the scrolling and scrollbar are supposed to be re-enabled in a second, but there seems to be an error in there somewhere, sorry.

EDIT 3:

For your information at this moment, these lines work:

    document.body.style.paddingLeft = (scrollbarwidth) + "px";

    $('body').css('padding-left', scrollbarwidth);

    document.body.style.paddingRight = (scrollbarwidth) + "px";

    $('body').css('padding-right', scrollbarwidth);

    document.body.style.marginLeft = (scrollbarwidth) + "px";

    $('body').css('margin-left', scrollbarwidth);

    document.body.style.marginRight = (scrollbarwidth) + "px";

    $('body').css('margin-right', scrollbarwidth);

Maybe you have enough information to solve it, if you have the same issue, but unfortunately, this wasn't enough for me. It might be important info to know that I have my content centered with a width / max-width of just 500px, and that I don't actually have a body class. Maybe on designs with width="100%", or elements with absolute positioning, the lines might be enough.

Both javascript and jquery solutions are welcomed.

EDIT 4:

I finally solved it for my own circumstances - feel free to read the answer below. It works for preventing elements to jump when hiding the vertical scrollbar, and with some tinkering, it could probably do for a body class, or other situations.

Answer 1

Is your scrollbarwidth integer? Try this

var scrollbarwidth = 100;
$('body').css('margin-right', scrollbarwidth);

Maybe you have wrong value at scrollbarwidth ? In my ff this code works.