<html xmlns=" http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0pxpadding:0px}
html,body{overflow:hidden}
#cont1 {height: 200pxwidth: 200pxposition: absolutetop: 16pxleft: 19px<br>background-color: #090cursor:movez-index:1}
</style>
<script type="text/javascript">
window.onload=function(){
function getObj(d){return document.getElementById(d)}
function drag(obj){
var o=document.getElementById(obj)
var move=false
o.onselectStart=function(){return false}
o.onmousedown=function(e){
e=e||event
this.innerHTML="你按下了鼠标！"
move=true
cx=e.clientX-this.offsetLeft
cy=e.clientY-this.offsetTop}//down
o.onmousemove=function(e){
e=e||event
if(move==true){
this.style.left=e.clientX-cx+"px"
this.style.top=e.clientY-cy+"px"}}//move
o.onmouseup=function(){
move=false
this.innerHTML=" "}}//fn
d=document.getElementsByTagName("div").length
drag("cont1") }//onload
</script></head>
<body><div class="cont" id="cont1"></div></body></html>
如果你想实现拖动效果，并把层拖动到当前窗口外隐藏掉的话，可以用我上面写的JS代码。如果你只是想某个窗口隐藏掉，只用CSS就可以了，方法很多，可以设置它的visibility:hidden或者用绝对定位方法，将它的left或者top设置成负的，值它的宽度或者高度，然后给它的父元素添加CSS样式：position:relativeoverflow:hidden
1、解决滚动穿透：通过给弹层绑定touchmove和mousewheel事件，取消默认行为实现。2、取消默认行为后不能滚动：给需要滚动展示的区域绑定touchstart、touchmove和mousewheel事件，监听触发区域的Y值，对应修改可滚动区域的translateY值，实现滚动效果。
