html - 我似乎无法禁用滚动条

Question

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

这是 JSFiddle:jsfiddle.net/27fJW/94

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

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