javascript – 如何忽略CSS中的滚动条宽度？

2019年7月28日 277次阅读

说明

《javascript – 如何忽略CSS中的滚动条宽度？》

我想在一条线上水平排列三个盒子,但最后一个盒子掉下来.

《javascript – 如何忽略CSS中的滚动条宽度？》

当我删除滚动条时,它排成一行.

因此,问题是由滚动条宽度引起的.

如何忽略css中的滚动条宽度？

我是否需要编写JavaScript代码来计算滚动条宽度并调整包装器dom元素的宽度？

DEMO&码

我在codePen.io中发布了html和css代码.

http://codepen.io/anon/pen/kXAPap

HTML

<div id="main">

    <ul id="window-list">

        <li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li>


    </ul>

</div>

CSS

body {
    border-top: solid 1px #a3a1a3;
    margin: 0;
    padding: 20px;
    background-color: #e7e7e7;
}

ul, li, p {

    margin: 0;
    padding: 0;

}

/*
1px(border-left) + 30px(padding-left) + 158px(width) + 18px(margin-right) + 158px(width) + 18px(margin-right) + 158px(width) + 30px(padding-right) + 1px(border-right) = 572px
*/

#main {
    width: 572px;
}


#window-list {

    background-color: #ffffff;
    border: solid 1px #b8b8b8;
    width: 510px;
    height: 350px;
    margin: 0 0 8px 0;
    overflow: scroll; /*This line causes the problem*/
    padding: 10px 30px;
    list-style-type: none;


}

.window {
    display: inline-block;
    margin: 0 18px 18px 0;


}

.window:nth-child(3n) {

    margin-right: 0;

}

.window-thumbnail {

    margin: 0 0 8px 0;
    height: 158px;
    width: 158px;
    border-radius: 8px;
    cursor: pointer;
    background-color: #e0e0e0;
}

最佳答案 在纯CSS中执行此操作的一种方法是使滚动条完全不可见.这仍然允许滚动.

::-webkit-scrollbar { 
display: none; 
}

您还可以使用jQuery来实现您想要的内容：

$(document).ready(function(){
    var body = $('body');
    var normalwidth = 0;
    var scrollwidth = 0;
    if(body.prop('scrollHeight')>body.height()){
        normalwidth = window.innerWidth;
        scrollwidth = normalwidth - body.width();
        $('#main').css({marginRight:'-'+scrollwidth+'px'});
    }
});

您可以使用以下方法隐藏水平滚动：

body {
    overflow-x:hidden;
}

Here’s a jsfiddle made by Lwym.
我建议你也查看他的original answer.

点赞