Question

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

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

重要提示：当编辑器处于打开状态时，我仍然希望页面内容可以在下面滚动...因此页面上的overflow:hidden不是一个选项。

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/

检查它是否适合您。

Answer 2

最好的方法是使用：

 body{
 overflow:hidden;
 overflow-y: scroll;
 }

在css中，并在拉出侧栏时调用它

隐藏一个元素的滚动条但不隐藏其他元素（点击/事件）

2 个答案: