Position fixed button that take scrollbar into account (show/hide scrollbar)

Question

I have a button I need to position at the bottom of the page in the right side.

https://jsfiddle.net/zuk80g6L/

button {
    position: fixed;
    right: 16px;
    bottom: 16px;
}

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

I need to take this into account:

1. Is the scrollbar visible
2. What's the width of the scrollbar
3. What if there is a scrollbar, but it isn't changing the site (like on a phone)
4. It has to be fixed

Basically if there is a scrollbar, move the button further left onto the site.

How is something like that possible? Thanks

Answer 1

Use these solutions to get if scrollbar is presented:

1. How can I check if a scrollbar is visible?
   2. Detect if a page has a vertical scrollbar?

Based on that trigger the class/css for the button, like

if (hasScrollbar) {
  /* Move button right for 8px */
}

In addition, you can get scrollbar width

Answer 2

I have done some modifications on you code.

First I added a div that i used as a container and gave it Id #content

to check if the scroll bar is added to the page check the height of the content div and the window height. if the window height is smaller then the scroll bar is added and we give the button a right 24px;

here is the js script that does the job

var contenth = $("#content").height();
var windowh = $(window).height();
if  (contenth>windowh){
$("#bottom_button").css('right','24px');
}

and the updated jsfiddle

P.S it cannot be made without css.