I can't seem to disable the scroll bar

Question

I am trying to disable the scroll bar on page1 but not page2. I have tried many things such as overflow: hidden; or adjusting the height but I have had no luck.

Here is the 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>

What can I do to achieve this?

score 1 · Answer 1 · edited May 23 '17 at 11:43

1

First we hide the overflow, once you go to page 2 you reenable overflow. Updated JS fiddle.

body {
  overflow:hidden;
}

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

fiddle

Another option for display/fade mechanisms is CSS3 Keyframes, and I'd say they are preferred since they are hardware accelerated and also remove some complexity from the general implementation. See here: Animation CSS3: display + opacity

edited May 23 '17 at 11:43

Community

1
1

answered Jul 16 '15 at 00:40

Alexei Darmin

2,079
1
18
30

page2 isn't actually fading in there, it just seems like it since page1 fades out. – Justin Jul 16 '15 at 00:51

score 1 · Accepted Answer · answered Jul 16 '15 at 01:13

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);
});

Check this Fiddle

Beat me to it, props for same solution though :) – Alexei Darmin Jul 16 '15 at 01:22 — Alexei Darmin, Jul 16 '15 at 01:22

score 0 · Answer 3 · answered Jul 16 '15 at 00:36

0

This seems to do the trick for me in your JSFiddle:

body {
    overflow-y: hidden;
}

answered Jul 16 '15 at 00:36

Lansana Camara

9,497
11
47
87

It disables the scrollbar for page2 also. I don't want that. – Justin Jul 16 '15 at 00:40
Then put a container around page1 and add a class to it and use the CSS I provided on said class. – Lansana Camara Jul 16 '15 at 00:54
Do you mean like this: http://jsfiddle.net/27fJW/117/ because that isn't working. – Justin Jul 16 '15 at 01:00
page1 has a very small height so your solution won't work @LansanaCamara. The overflow occurs from page2, restricting page1 does not influence the underlying cause – Alexei Darmin Jul 16 '15 at 01:16

I can't seem to disable the scroll bar

3 Answers3