V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
real_newbie
V2EX  ›  JavaScript

請教Chrome Web Store的一個特效實現

  •  
  •   real_newbie · 2011-11-21 19:26:08 +08:00 · 3948 次点击
    这是一个创建于 4511 天前的主题,其中的信息可能已经有所发展或是发生改变。
    就是點擊一個App的時候, 會彈出一個層, 然後原來的scroll就不能移動了, 而轉到新的這個層上面移動? 請教這要怎麼做?
    7 条回复    1970-01-01 08:00:00 +08:00
    zythum
        1
    zythum  
       2011-11-21 19:56:49 +08:00
    你再原来的层上面做个遮罩,就有点像chrome web store 出啦的那个半透明的那样。就可以了...
    real_newbie
        2
    real_newbie  
    OP
       2011-11-21 20:02:42 +08:00
    @zythum 不是要它那個半透明的.

    前面的描述可能不大清楚:
    1, 在沒點App之前scroll bar可以一直往下拉
    2, 點了App後, 跳出來一個層, scroll bar就不能再下拉了

    還是說這個"遮罩"就可以實現這個效果? 具體腫麼個弄法...
    zythum
        3
    zythum  
       2011-11-21 20:06:22 +08:00
    加个遮罩应该就可以了。遮罩做position:fixed top0;left0;right0;bottom0 这样。
    zythum
        4
    zythum  
       2011-11-21 20:13:08 +08:00
    抱歉 .。。 刚才试了下。这个方法不行... = =、
    可以在那个有滚动的上面做个overflow:hidden;

    我在去看下google是怎么实现的。
    real_newbie
        5
    real_newbie  
    OP
       2011-11-21 20:16:50 +08:00
    @zythum 恩...謝謝~~ 我也那inspect element...
    zythum
        6
    zythum  
       2011-11-21 20:25:43 +08:00
    懂了。chrome app store 使用的height:100%;有点想当年的pip.io
    那个滚动的不是body。
    那样的话直接用一个遮盖改可以了。就像我上面说的,
    下面给你下demo代码。
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    body{height:100%;width:100%;}
    #out{position:fixed;top:0;left:0;bottom:0;right:0;overflow: auto;}
    #cover{position:fixed;top:0;left:0;bottom:0;right:0;background:#ccc;opacity: 0.5;}
    #box{position:fixed;top:50px;left:50px;bottom:50px;right:50px;background:#aaa;}
    </style>
    </head>
    <body style="overflow:hidden;">
    <div id="out">
    我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br /> 我是内容<br />
    </div>
    <div id="cover" style="display:block;">我是遮罩层</div>
    <div id="box">我是弹出窗</div>
    </body>
    </html>
    可以尝试把cover的display改成none.
    benzhe
        7
    benzhe  
       2011-11-21 22:01:29 +08:00
    挺多方法的,如果不需要滚动可以直接用document.body.onscrollwheel = function(){return false;},然后上面盖一层height:100%。
    需要滚动的话盖一层overflow:hidden之后,在新层加个overflow-y:scroll。
    body上加overflow-y:none可以隐藏滚动条

    研究了一下chrome web store 的实现方法,是通过height:100%加改变底层position(relative to fixed)实现的,这样就可以保留滚动条但不会出现可滑的bar。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3534 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 04:51 · PVG 12:51 · LAX 21:51 · JFK 00:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.