使用 jquery nicescroll 时出现水平滚动条问题答案

【问题标题】：horizontal scroll bar issue while using jquery nicescroll使用 jquery nicescroll 时出现水平滚动条问题
【发布时间】：2015-04-07 11:27:16
【问题描述】：

我正在使用 nicescroll jquery 插件。 http://areaaperta.com/nicescroll/ 我得到了不需要的水平滚动条。通过这样做horizrailenabled:false，它会消失，但在重新调整窗口大小后它没有出现。它也禁用了我不想要的重新调整大小。我也尝试了我所有的css，这可能会导致出现水平条，但没有发生任何我想要的事情。我猜这可能是由于宽度问题。但无法弄清楚。

如何让这个单杠消失？

我的代码如下：

    <style>
body {
    margin:0;
    padding:0;
    color:#000;
    background:#FFFFFF;
    letter-spacing:0.5px;
    overflow-x:hidden;
}
        .wrap{
            background-color: #087877;
            height: 100%;
            overflow: hidden;
            position: relative;
            width:100% !important;
        }
        #scrollingContent{
            padding-left: 149px;
            padding-top: 136px;
        }
        #mainContent {
            position:absolute;
            padding:0;
            top:0;
            left:0;
            width:100%;
            height:100%;
            font-family:mainFont;
            color:#FFF;
            overflow:hidden;
        }
    .contactHeader{
        color: white;
        font: 100 52px/60px 'TitilliumText25L1wt',Arial,sans-serif;
        height: 125px;
        left: 144px;
        letter-spacing: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 10;
        background-color: #178895;
        line-height: 142px;
    }
        </style>

        <div id="mainContent">
            <div id="newsWrapper" class="wrap">
                <div id="scrollingContent">
                <div class="newsHeader">news</div>
                                                           //content
               </div>
            </div> 
        </div>

        <script type="text/javascript">
             $("#newsWrapper").niceScroll({touchbehavior:false,cursorborder:"0px solid #fff",cursorcolor:"#E1F3FF",cursoropacitymax:0.2,cursorborderradius:0,bouncescroll:true,scrollspeed:100, cursorwidth:15,autohidemode:false,zindex:10});
             $("#newsWrapper").getNiceScroll().onResize()
        </script>

【问题讨论】：

标签： jquery html css jquery-plugins nicescroll

【解决方案1】：

为了避免不必要的滚动添加 css。为了避免在你的 body 标签中不必要的滚动，请这样做。

body{
overflow-x: hidden;  /*avoiding horizontal scrolling*/
}

【讨论】：

@user3386779：感谢您的回复。我也试过了，但没有成功。
创建一个小提琴它有助于找出代码中的错误

【解决方案2】：

你可以使用：

$("#newsWrapper").niceScroll({horizrailenabled:false});

【讨论】：