我似乎无法禁用滚动条答案

【问题标题】：I can't seem to disable the scroll bar我似乎无法禁用滚动条
【发布时间】：2015-10-05 06:21:55
【问题描述】：

我正在尝试禁用 page1 上的滚动条，而不是 page2。我尝试了很多东西，例如溢出：隐藏；或调整高度，但我没有运气。

JS：

YUI().use('transition', 'node-event-delegate', function (Y) {
    var begin = Y.one('#begin');

    function toggle(e) {
        closeIt(e);
        start();
    }

    function start() {
        var node2 = Y.one("#page2");
        node2.replaceClass('invis', 'fade-in-effect');
    }

    function closeIt(e) {
        var node1 = Y.one('#page1');
        node1.hide(true);
    }

    begin.on('click', toggle);
});

CSS：

.invis {

    z-index: -1;

    opacity:0;

}

#page2 {

    position:absolute;

    top:10px;

    left:10px;

}

.fade-in-effect {

    opacity: 1;

    transition: opacity 4s linear;

}

HTML：

<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<div id="page1">This is Page 1
<a href="javascript:void(0);" onclick="start()" id="begin">ClickMe</a>

</div>
<div id="page2" class="invis">This is Page 2 content
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
</div>

我能做些什么来实现这个目标？

【问题讨论】：

标签： html css scroll scrollbar overflow

【解决方案1】：

HTML

<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<div id="page1">This is Page 1
<a href="javascript:void(0);" onclick="start()" id="begin">ClickMe</a>

</div>
<div id="page2" class="invis">This is Page 2 content
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
    <br>content
    <br>
    <br>
</div>

CSS

body{
    overflow-y: hidden;
}
.invis {

    z-index: -1;

    opacity:0;

}

#page2 {

    position:absolute;

    top:10px;

    left:10px;

}

.fade-in-effect {

    opacity: 1;

    transition: opacity 4s linear;

}

Javascript

YUI().use('transition', 'node-event-delegate', function (Y) {
    var begin = Y.one('#begin');

    function toggle(e) {
        closeIt(e);
        start();
    }

    function start() {
        var node2 = Y.one("#page2");
        node2.replaceClass('invis', 'fade-in-effect');
        document.body.style.overflow = "auto";
    }

    function closeIt(e) {
        var node1 = Y.one('#page1');
        node1.hide(true);
    }

    begin.on('click', toggle);
});

查看Fiddle

【讨论】：

打败我，虽然支持相同的解决方案:)

【解决方案2】：

首先我们隐藏溢出，一旦您转到第 2 页，您就可以重新启用溢出。更新了 JS 小提琴。

body {
  overflow:hidden;
}

document.body.style.overflow = "auto";

fiddle

显示/淡入淡出机制的另一个选项是 CSS3 关键帧，我想说它们是首选，因为它们是硬件加速的，并且还从一般实现中消除了一些复杂性。见这里：Animation CSS3: display + opacity

【讨论】：

page2 实际上并没有淡入其中，它看起来就像是因为 page1 淡出。

【解决方案3】：

这似乎在你的 JSFiddle 中对我有用：

body {
    overflow-y: hidden;
}

【讨论】：

它也禁用了 page2 的滚动条。我不想那样。
然后在 page1 周围放置一个容器并为其添加一个类并使用我在该类上提供的 CSS。
你的意思是这样的：jsfiddle.net/27fJW/117，因为那行不通。
page1 的高度非常小，因此您的解决方案将无法正常工作@LansanaCamara。从page2发生溢出，限制page1不影响底层原因