Stop a scrollbar from pushing the content to the left

This script checks the width of the scrollbar (OS dependent) and the animates the content to the right by the amount of the width of the scrollbar.

by BramVanroy

HTML

<div id="test">Scrollbar width:<span/>
</div>
<section>
   <h1>Lorem Ipsum all the way</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
    Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem
    at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce
    nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu
    eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed
    dignissim lacinia nunc.</p>
  <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
    dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel
    nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis,
    luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris
    ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
    Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Nam nec ante.</p>
  <p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam,
    a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse
    potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien.
    Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit.
    Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae
    pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.</p>
  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
    cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed
    non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit
    amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel,
    egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices
    enim....

CSS

html, body {
  width: 100%;
  min-height: 100%;
}
body {
  color: #333;
  font: 1em/1.2em Verdana, sans-serif;
}
p {
  margin: 0 auto 1.2em;
  line-height: 1.2;
  text-align: justify;
}
h1 {
  font: bold 150% Verdana, sans-serif;
}
section {
  margin: 20px auto;
  padding: 0.8em;
  width: 85%;
  background: #ccc;
  position: relative;
  right: auto;
}
#test {
  height: 20px;
  padding: 0.2em 0.8em;
  border-radius: 0 0 0 8px;
  color: white;
  font-size: 80%;
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}

JavaScript

// Get scrollbar width
var inner = $('<p />', {
  style: 'width:100%;height:200px;'
}),
  outer = $('<div />', {
    style: 'position:absolute;top:0;left:0;visibility:hidden;width:200px;height:150px;overflow:hidden;'
  }),
  body = $("body"),
  span = $("div.test-text > span");

outer.append(inner).appendTo(body);

var w1 = inner.get(0).offsetWidth;
outer.css('overflow', 'scroll');
var w2 = inner.get(0).offsetWidth;
if (w1 == w2) w2 = outer.get(0).clientWidth;
outer.remove();

var w3 = w1 - w2,
  test = $("#test > span");

test.text(w3);

// Animate wrapper accordingly
function animateWrapper() {
  var wrapper = $("section"),
    valRight = wrapper.css("right");

  if (valRight != -w3 + "px") {
    var docH = $(document).height(),
      viewPortH = $(window).height();
    if (docH > viewPortH) {
      wrapper.stop().animate({
        "right": -w3
      }, 700);
    }
  } else {
    wrapper.stop().animate({
      "right": "0"
    }, 700);
  }
}

// Execute animateWrapper
animateWrapper();

// Execute function(s) on resize
$(window).resize(function() {
  animateWrapper();  
});