我也遇到过类似的问题。我试着在鼠标悬停时滚动，但它一直在推东西，导致糟糕的用户体验。我找到了一个简单的解决办法。我保持滚动条在它的位置，但使它透明，当光标悬停在div上时将它带回来。由于滚动条总是在那里，它不会修改div的其他元素的设计。

$(document).ready(function() { $('#list-parent').hover( function() { $("#list-parent").removeClass('scrollbar-invisible'); $("#list-parent").addClass('scrollbar'); }, function() { $("#list-parent").addClass('scrollbar-invisible'); $("#list-parent").removeClass('scrollbar'); }); }) .main-div { height: 100px; width: 400px; overflow: hidden; } .list-parent { height: 100px; background-color: yellow; overflow: scroll; padding:20px; width:150px; } .scrollbar-invisible::-webkit-scrollbar{ border: 3px solid #ffffff00; width: 5px; height: 20px; } .scrollbar::-webkit-scrollbar { width: 5px; height: 20px; } .scrollbar::-webkit-scrollbar-thumb { border-radius: 100vh; border: 3px solid black; padding-left: 20px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="app" class='main-div'> <div id ='list-parent' class='list-parent scrollbar-invisible'> <div style='background-color:pink'> <h1> Todos: </h1> <ol> <li>Test Item </li> <li>Test Item </li> <li>Test Item </li> <li>Test Item </li> <li>Test Item </li> <li>Test Item </li> <li>Test Item </li> </ol> </div> </div> </div>

我用这种方法解决了滚动条的类似问题:

首先禁用垂直滚动条设置它的:

overflow-y: hidden;

然后用固定的位置做一个div，高度等于屏幕高度，使它的宽度变薄，看起来像滚动条。这个div应该是垂直滚动的。现在在这个div中创建另一个与文档高度(包含所有内容)相同的div。现在你所需要做的就是给容器div添加一个onScroll函数，并在div滚动时滚动主体。代码如下:

HTML:

<div onscroll="OnScroll(this);" style="width:18px; height:100%;  overflow-y: auto; position: fixed; top: 0; right: 0;">
    <div id="ScrollDiv" style="width:28px; height:100%; overflow-y: auto;">
    </div>
</div>

然后在页面加载事件中添加这个:

JS:

$( document ).ready(function() {
    var body = document.body;
    var html = document.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
    document.getElementById('ScrollDiv').style.height = height + 'px'; 
});

function OnScroll(Div) {
    document.body.scrollTop = Div.scrollTop;
}

现在滚动div就像滚动body，而body没有滚动条。

编辑:这个答案目前还不太正确，请参考我的另一个答案，看看我在这里试图做什么。我正在努力解决它，但如果你能提供帮助，请在评论中这样做，谢谢!

使用右填充将减轻滚动条的突然出现

例子

从点状图中可以看出，无论滚动条是否存在，文本在换行前都会到达页面中的同一点。 这是因为当滚动条被引入时，填充隐藏在它后面，所以滚动条不会推送文本!

Safari和Chrome等Webkit浏览器在计算宽度时从可见页面宽度中减去滚动条宽度:100%或100vw。更多信息请参阅DM Rutherford的滚动和页面宽度。

试着用overflow-y: overlay代替。

你所需要做的就是添加:

html {
    overflow-y: scroll;
}

在你的CSS文件中，无论是否需要，都会有滚动条，尽管你不能滚动。

这意味着两者的视口宽度相同。

您可以获取滚动条大小，然后对容器应用边距。

就像这样:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

CSS删除h-滚动条:

body{
    overflow-x:hidden;
}

试着看看这个: http://jsfiddle.net/NQAzt/