curious1 curious1 - 3 years ago 162
CSS Question

Horizonal scroll bar displays at page load for sliding panel

I have a page that consists of multiple sections. One of the middle section needs a sliding panel on the right. However, when the page load, there is a horizontal scroll bar in the browser. Here is the jsfiddle link

Here is the HTML:

<div style="background-color: pink;height:100px;">
section before the sliding panel
</div>

<div class="cd-main-content" style="height:200px;background-color:yellow">

<a href="#0" class="cd-btn">show Panel</a>

<div class="cd-panel from-right">
<div class="cd-panel-container">
<div class="cd-panel-content ">
<a href="#0" class="cd-panel-close">Close</a>
<header class="cd-panel-header">
<h1>Title Goes Here</h1>
</header>
<p>Lorem ipsum dolor ...</p>
</div> <!-- cd-panel-content -->
</div> <!-- cd-panel-container -->
</div> <!-- cd-panel -->

</div>

<div style="background-color: orange;height:100px;">
section after the sliding panel
</div>


Here is the jsfiddel ink: https://jsfiddle.net/d61a5zqz/3/

CSS and Javascript code is in the demo.

I spent some time to get rid of the scroll bar. No success. How can I get rid of the scroll bar and keep the sliding animation and everything else at the same time? If a CSS solution is available, it would be great.

Best and regards.

Answer Source

Add this to your css file.

body{
  overflow-x:hidden;
}

It will remove the scrollbar on the x axis.

Hope this helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download