Search code examples
javascriptcssasp.net-mvchtmlcodepen

two Horizontol scroll bars

Am having two scroll bars in my website as i embed calendar widget from code pen https://codepen.io/jpag82/pen/Nazayx/

Two scroll bars

enter image description here

one scroll bar moves the body and the other moves the whole page as am using asp.net mvc5 so i called my header footer and side bar from shared layout. using 

overflow-y: hidden;

just hides the scroll bar of main page.

here you can see the image of single scroll bars which just moves the inner body

Single scroll

enter image description here

how to remove the scroll bar which moves the inner body ?

Solution

  • The problem is, the inner container for the calendar widgets has a fixed height, and is set to scroll if overflow. The way to solve your problem will be to change the fixed height of the inner container to "height: auto".

    Take for example the code below, widget-container has a fixed height in css, so it creates its own scrollbar on overflow, but when you click on the button, the height is toggled to 'auto', so the inner scrollbar disappears, and all the scrolling is now on body: notice how body scrollbar shrinks, when you click the button.

    That should fix your issue.

    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>