两个水平滚动条

Question

当我从代码笔嵌入日历小部件时，我的网站上有两个滚动条 https://codepen.io/jpag82/pen/Nazayx/

两个滚动条

一个滚动条移动主体，另一个滚动条移动整个页面，因为我使用 asp.net mvc5 所以我从共享布局调用了我的页眉页脚和侧边栏。使用

overflow-y: hidden;

只是隐藏主页面的滚动条

在这里你可以看到只移动内部主体的单个滚动条的图像

单卷

如何去除移动内部body的滚动条？

Answer 1

如果您不想继续滚动。寻找显示滚动的内部元素，并更改 CSS

overflow-y: hidden;

Answer 2

问题是，日历小部件的内部容器具有固定高度，并且设置为在溢出时滚动。解决问题的方法是将内部容器的固定高度更改为 "height: auto".

以下面的代码为例，widget-container 在 css 中有一个固定的高度，所以它会在溢出时创建自己的滚动条，但是当你点击按钮时，高度会切换到 'auto'，所以内部滚动条消失了，现在所有的滚动都在主体上：注意单击按钮时主体滚动条是如何缩小的。

这应该可以解决您的问题。

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>

Answer 3

我猜你在内部滚动中的所有内容都设置为滚动

    overflow-y: hidden;

应该可以正常工作，只需在父级 div 上使用它即可，其中包含出现内部滚动条的全部内容

两个水平滚动条

two Horizontol scroll bars

html

javascript

css

asp.net-mvc

codepen