我似乎无法禁用滚动条

Question

我正在尝试禁用第 1 页而非第 2 页上的滚动条。我试过很多东西，比如溢出：隐藏；或调整高度，但我没有运气。

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>

我该怎么做才能实现这一目标？

Answer 1

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

body {
    overflow-y: hidden;
}

Answer 2

首先我们隐藏溢出，一旦你转到第 2 页，你就可以重新启用溢出。更新了 JS fiddle.

body {
  overflow:hidden;
}

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

fiddle

display/fade 机制的另一个选项是 CSS3 关键帧，我认为它们是首选，因为它们是硬件加速的，并且还消除了一般实现的一些复杂性。看这里：Animation CSS3: display + opacity

Answer 3

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

我似乎无法禁用滚动条

I can't seem to disable the scroll bar

html

css

scroll

overflow

scrollbar