Position fixed button that take scrollbar into account (show/hide scrollbar)
<p>I have a button I need to position at the bottom of the page in the right side.</p>

<p><a href="https://jsfiddle.net/zuk80g6L/" rel="nofollow">https://jsfiddle.net/zuk80g6L/</a></p>

<pre><code>button {
    position: fixed;
    right: 16px;
    bottom: 16px;
}
</code></pre>

<p>That button should move further into the screen (like <code>right: 24px</code> if we assume the scrollbar is 8px wide), when the scrollbar is visible. Right now it just pretty much says <code>the total view is 1920 pixels wide. The button should always be 16 pixels from the right side</code>.</p>

<p>I need to take this into account:</p>

<ol>
<li>Is the scrollbar visible</li>
<li>What's the width of the scrollbar</li>
<li>What if there is a scrollbar, but it isn't changing the site (like on a phone)</li>
<li><strong>It has to be fixed</strong></li>
</ol>

<p>Basically if there is a scrollbar, move the button further left onto the site.</p>

<p>How is something like that possible? Thanks</p>