Question

我有一个由多个部分组成的页面。其中一个中间部分需要右侧的滑动面板。但是，当页面加载时，浏览器中有一个水平滚动条。这是jsfiddle链接

这是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>

这是jsfiddel墨水：https://jsfiddle.net/d61a5zqz/3/

CSS和Javascript代码在演示中。

我花了一些时间来摆脱滚动条。没有成功。如何摆脱滚动条和同时保持滑动动画和其他所有内容？如果CSS解决方案可用，那就太好了。

Answer 1

将此添加到您的css文件中。

body{
  overflow-x:hidden;
}

它将删除x轴上的滚动条。

希望这有帮助。

滑动面板的页面加载时显示水平滚动条

1 个答案: