教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

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

就是一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。