jquery - 隐藏一个元素的滚动条而不是其他元素(点击/事件时)

Question

我正在构建一个界面，其中屏幕右侧有一个滑出式编辑器。有可能页面和编辑器中的内容都需要滚动，在这种情况下，会出现难看的双滚动条。

我想做的是在调用编辑器时将 PAGE 滚动条的可见性设置为隐藏，但在编辑器中保持滚动条的可见性。

重要说明:当编辑器打开时，我仍然希望页面内容可以在下方滚动...所以页面上的 overflow:hidden 不是一个选项.

相关代码如下。 Here's a Fiddle.

HTML:

<button>Open Editor</button>
<div class="editor">Editor line 1
    <br/>Editor line 2
    ...
</div>
<div class="content">This is line 1 
    <br/>This is line 2
    ...
</div>

CSS:

::-webkit-scrollbar {
    width: 14px;
    height: 18px;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}
.noScroll::-webkit-scrollbar-track {
    visibility:hidden;
}

jQuery:

$(function () {
    $("button").click(function () {
        $(".content").toggleClass("noScroll");
        $(".editor").toggle("slide", {
            direction: "right"
        }, 500);
    });
});

感谢任何帮助!谢谢!

Answer 1

除了Qaz在评论中提到的，还可以在css中做如下修改来达到想要的效果:

html, body {
    height:100%;
    font-family:Arial;
    font-size:12px;
    line-height:2em;
    overflow:hidden;
}
body:hover {
    overflow:auto;
}
.editor:hover {
    overflow:auto;
}
.editor {
    width:300px;
    height:100%;
    background:#eee;
    padding:20px;
    position:fixed;
    right:0;
    top:0;
    overflow:hidden;
    display:none;
}

演示:http://jsfiddle.net/TGX5D/5/

检查它是否适合您。