将滚动条记入帐户的位置固定按钮（显示/隐藏滚动条）

Question

我需要一个按钮，我需要在右侧的页面底部定位。

https://jsfiddle.net/zuk80g6L/

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

当滚动条可见时，该按钮应进一步移动到屏幕中（如果我们假设滚动条宽度为8px，则为right: 24px）。现在它只是说the total view is 1920 pixels wide. The button should always be 16 pixels from the right side。

我需要考虑到这一点：

1. 滚动条是否可见
2. 滚动条的宽度
3. 如果有滚动条怎么办，但它不会改变网站（比如在手机上）
4. 必须修复

基本上如果有滚动条，请将按钮进一步向左移动到网站上。

这样的事情怎么可能？感谢

Answer 1

使用这些解决方案获取是否显示滚动条：

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

基于该触发按钮的类/ css，如

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

此外，您可以get scrollbar width

Answer 2

我对你的代码做了一些修改。

首先，我添加了一个用作容器的div并将其ID为#content

检查滚动条是否添加到页面中检查内容div的高度和窗口高度。如果窗口高度较小，则添加滚动条，我们给按钮右侧24px;

这是完成工作的js脚本

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

和更新的jsfiddle

P.S不能没有CSS。