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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 4781 天前的主题，其中的信息可能已经有所发展或是发生改变。

就是點擊一個App的時候, 會彈出一個層, 然後原來的scroll就不能移動了, 而轉到新的這個層上面移動? 請教這要怎麼做?

一個

請教

移動

7 条回复 • 1970-01-01 08:00:00 +08:00

zythum

2011-11-21 19:56:49 +08:00

你再原来的层上面做个遮罩，就有点像chrome web store 出啦的那个半透明的那样。就可以了...

real_newbie

2011-11-21 20:02:42 +08:00

@zythum 不是要它那個半透明的.

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

還是說這個"遮罩"就可以實現這個效果? 具體腫麼個弄法...

zythum

2011-11-21 20:06:22 +08:00

加个遮罩应该就可以了。遮罩做position：fixed top0;left0;right0；bottom0 这样。

zythum

2011-11-21 20:13:08 +08:00

抱歉 .。。刚才试了下。这个方法不行... = =、
可以在那个有滚动的上面做个overflow:hidden;

我在去看下google是怎么实现的。

real_newbie

2011-11-21 20:16:50 +08:00

@zythum 恩...謝謝~~ 我也那inspect element...

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">
我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 
</div>
<div id="cover" style="display:block;">我是遮罩层</div>
<div id="box">我是弹出窗</div>
</body>
</html>
可以尝试把cover的display改成none.

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。