html - 固定位置 float 按钮到页面右侧，无论父 div 上的滚动条如何

Question

我想实现一个 float 到页面右侧的div。这个 div 有一个父 div，它有滚动条而不是在 body 上滚动。我尝试在 div 上应用固定位置，我想一直 float ，但是当滚动条出现在页面上时，它会重叠在上面。

我希望这个 div 在滚动条出现时进行调整。

.scrollbar {
                width: 100%;
                height: 600px;
                overflow: auto;
                position: relative;
            }
            .innerDiv {
                height: 900px;
            }
            .floatingBtn {
                background: #000;
                color: #fff;
                transform: rotate(-90deg);
                width: 40px;
                right: 0;
                top: 80px;
                position: fixed;
            }

感谢阅读。 Fiddle

Answer 1

其背后的原因是，当滚动条进来时，它被认为是div的宽度。我的意思是，如果你的 div 宽度是 100px 那么它实际上大约是 85px(div space) + 15px(滚动条)

因此，如果您的 div 有滚动条，则 width = div(content space) + scroll-bar。

检查一下:

在下面的演示中有两个 div's 都具有相同的 width 即 width:150px;。但是您可以看到一个有滚动条而另一个没有的区别。

.div1, .div2 {
    display:block;
    height:150px;
    width:150px;
    overflow:hidden;
    background:#333;
    color:#eee;
    border:1px solid red;
}
.div2 {
    overflow:auto;
}

<div class="div1">
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
    </ul>
</div>
<br>
<div class="div2">
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
    </ul>
</div>

现在谈谈您的问题。它将 right:0px 和滚动条视为 div 的一部分。

所以只是为了解释我在下面的解决方案中添加了JQuery，只有在需要时才使用它。

//Find Total Width of .scrollbar Div.
var totalWidth = $(".scrollbar").outerWidth();
alert("Total Width of Div is : " + totalWidth);

//Find Width of .scrollbar Div without scrollbar in it.
var divWidth = $('.scrollbar')[0]['clientWidth'];
alert("Width of Div Without Scroll-Bar is : " + divWidth);

// So now calculating the width of scrollbar.
var scrollWidth = totalWidth - divWidth;
alert("Width of scrollbar is : " + scrollWidth);

body {
     overflow: hidden;
     margin:0px;
 }
 .scrollbar {
     margin:0px;
     width: 100%;
     height: 600px;
     overflow: auto;
     position: relative;
 }
 .innerDiv {
     margin:0px;
     height: 900px;
 }
 .floatingBtn {
     background: #000;
     color: #fff;
     transform: rotate(-90deg);
     width: 40px;
     right: 15px; /* From JQuery we know scroll bar width is 17px but still reducing it 2px*/
     top: 80px;
     position: fixed;
 }
 .btnContainer {
     /*position: fixed;*/
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="scrollbar">
    <div class="innerDiv">
        <div class="btnContainer">
            <div class="floatingBtn">Button Text</div>
        </div>
    </div>
</div>

JSFiddle : DEMO