I can't seem to disable the scroll bar
我正在尝试禁用page1上的滚动条,而不是page2。 我已经尝试了很多事情,例如溢出:隐藏;隐藏。 或调整高度,但我没有运气。
这是JSFiddle:jsfiddle.net/27fJW/94
JS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .invis { z-index: -1; opacity:0; } #page2 { position:absolute; top:10px; left:10px; } .fade-in-effect { opacity: 1; transition: opacity 4s linear; } |
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"> This is Page 1 ClickMe This is Page 2 content content content content content content content content content content content content content content content content content content content content content content content |
我该怎么做?
的HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"> This is Page 1 ClickMe This is Page 2 content content content content content content content content content content content content content content content content content content content content content content content |
的CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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; } |
Java脚本
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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); }); |
检查这个小提琴
首先,我们隐藏了溢出,一旦您转到第2页,就可以重新启用溢出。 更新了JS小提琴。
1 2 3 4 5 | body { overflow:hidden; } document.body.style.overflow ="auto"; |
小提琴
显示/淡入淡出机制的另一种选择是CSS3关键帧,我想说它们是首选,因为它们是硬件加速的,并且还消除了一般实现的复杂性。 参见此处:动画CSS3:显示+不透明度
在您的JSFiddle中,这似乎对我有用:
1 2 3 | body { overflow-y: hidden; } |