当我从代码笔中嵌入日历小部件时，我的网站上有两个滚动条 https://codepen.io/jpag82/pen/Nazayx/
两个滚动条
一个滚动条移动正文，另一个滚动条移动整个页面，就像我使用 asp.net mvc5 一样，所以我从共享布局调用页眉页脚和侧边栏。使用
overflow-y: hidden;
只是隐藏主页面的滚动条。
在这里你可以看到单个滚动条的图像，它只是移动内部主体
单卷
如何去除移动内部body的滚动条？
最佳答案
问题是，日历小部件的内部容器具有固定高度，并且设置为在溢出时滚动。解决您的问题的方法是将内部容器的固定高度更改为“height: auto”。
以下面的代码为例，widget-container 在 css 中有一个固定的高度，所以它会在溢出时创建自己的滚动条，但是当你点击按钮时，高度会切换为“自动”，所以内部滚动条消失了，现在所有的滚动都在 body 上:请注意单击按钮时 body 滚动条是如何缩小的。
这应该可以解决您的问题。
var btn = document.getElementById('btn');
var widgetContainer = document.getElementById("widget-container");
var hasFixedHeight = true;
btn.addEventListener("click", function(evt) {
if (hasFixedHeight) {
widgetContainer.classList.add("height-auto");
hasFixedHeight = false;
} else {
widgetContainer.classList.remove("height-auto");
hasFixedHeight = true;
}
});body {
overflow: auto;
font-size: 20px;
}
.fixed-container {
height: 500px;
font-size: 18px;
overflow: auto;
margin: 15px 0;
}
.height-auto {
height: auto;
}
.content {
font-size: 15px;
height: 1000px;
margin: 15px 0;
padding: 10px;
}
<body>
Here is body, parent container of everything.
<div id="widget-container" class="fixed-container">
Here is the parent container to the calendar widgets
<button id="btn" type="button">toggle scrollbar</button>
<div class="content">
Here is where the content, that is, your calendar widgets will be.
</div>
</div>
</body>关于javascript - 两个水平滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51608835/