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

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

body {
  overflow:hidden;
}

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

fiddle

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

Answer 2

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

Answer 3

这似乎在你的JSFiddle中为我做了诀窍：

body {
    overflow-y: hidden;
}

我似乎无法禁用滚动条

3 个答案: