Question

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

两个滚动条

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

overflow-y: hidden;

仅隐藏主页的滚动条。

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

单滚动

如何删除移动内部主体的滚动条？

Answer 1

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

overflow-y: hidden;

Answer 2

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

以下面的代码为例，widget-container在css中具有固定的高度，因此在溢出时会创建自己的滚动条，但是当您单击按钮时，高度将切换为“自动”，因此内部滚动条消失，并且所有滚动现在都在主体上：请注意，单击按钮时主体滚动条如何缩小。

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

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上使用它（包含内部滚动条所显示的全部内容）就可以正常工作

两个Horizontol滚动条

3 个答案:

两个Horizo​​ntol滚动条

3 个答案:

两个Horizontol滚动条