Javascript 滑动面板页面加载时显示水平滚动条
我有一个由多个部分组成的页面。其中一个中间部分的右侧需要一个滑动面板。但是,当页面加载时,浏览器中有一个水平滚动条。这里是jsfiddle链接 以下是HTML:Javascript 滑动面板页面加载时显示水平滚动条,javascript,css,Javascript,Css,我有一个由多个部分组成的页面。其中一个中间部分的右侧需要一个滑动面板。但是,当页面加载时,浏览器中有一个水平滚动条。这里是jsfiddle链接 以下是HTML: <div style="background-color: pink;height:100px;"> section before the sliding panel </div> <div class="cd-main-content" style="height:200px;backgroun
<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墨水:
CSS和Javascript代码在演示中
我花了一些时间来摆脱滚动条。没有成功。如何摆脱滚动条并同时保留滑动动画和其他所有内容?如果CSS解决方案可用,那就太好了 将其添加到css文件中
body{
overflow-x:hidden;
}
它将删除x轴上的滚动条
希望这有帮助。这似乎有效。我想知道当页面的某些部分需要单杠时,这是否会删除单杠。我是否应该为这些单独的部分添加overflow-x的显式css?谢谢你帮助我!在正文中使用此选项可以防止页面具有滚动条,但是正文中的任何元素都不会受到影响,除非它们具有overflow-x:inherit。通过在主体上指定此规则,您可以在主体内部自由地拥有一个带有自己滚动条的div。希望这有帮助。