css的问题，主要排查overflow：hidden；js方面的问题，主要是有在touchstart、touchmove或touchend等事件中的阻止默认事件的原因

如果在创建ref="wrapper"这个BScroll对象时，把子元素的ovflow:scroll给禁止掉的话，那此时只要重新设置子元素的相关属性即可。

解决方法：

//添加禁止屏幕滚动

document.querySelector('.element').addEventListener('touchmove', stopScroll, false);

//移除禁止滚动事件监听

document.querySelector('.close').removeEventListener('touchmove', stopScroll, false);

//禁止默认行为方法

function stopScroll(e) {

    e.preventDefault()

}

注： 添加和移除监听时，必须是移除事件名相同，操作方法相同的才有效，所以stopScroll方法要单独定义。

元素只有一个子元素的情况下使用了flex布局就会产生无法滚动的情况。

1、阻止所有能导致页面滚动的事件。//scroll不能阻止，只能阻止mousewheel，鼠标拽滚动条就悲剧了； 2、bodyoverflow:hidden//win下右侧滚动条会消失导致页面横移，移动端阻止不了； 3、把滚动部分单独放在一个div里，和弹出部分同级，body和window同高。//所有涉及offset/scrollTop的方法都要修改。fix并且width100%的元素(比如微博顶栏)会压在内容区滚动条上； 4、弹出时算scrollTop，给内容区fix然后top移动到目前位置，同时body给一个overflow-y:scroll强撑出滚动条。

pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条，达到无法滚动的效果。

也就是说给body添加overflow：hidden属性即可，IE6、7下不会生效，需要给html增加overflow:hidden属性。

要制作这个效果在PC端非常简单，只需要设置html的高度为100%占满屏幕，并且将html的overflow设置为hidden，即可保证页面不可滚动。

但是同样的问题在移动端情况就有所区别。仅仅设置html的上列属性，在移动端仍然无法禁止页面超出部分的滚动，我们需要设置下面的代码才能在弹框出现的时候禁止页面滚动：

html.style.overflow="hidden";

html.style.height="100%";

body.style.overflow="hidden";

body.style.height="100%";

原因是因为移动端是基于touch事件，要禁止基于touch事件的滚动，我们必须在对html禁止滚动的基础之上，再将需要禁止滚动的内容上再增加一个包裹层块级元素，然后将这个包裹层块级元素高度设置为100%并设置overflow:hidden;，那么在这里我们认为body包裹了整个页面，正是我们需要的块级元素，将他也设置为禁止滚动，就可以保证移动端页面的滑动时间不会触发页面滚动。

当用户关闭了弹框，页面也就恢复正常，我们设置如下CSS样式属性来还原整个页面的滚动效果：

html.style.overflow="visible";

html.style.height="auto";

body.style.overflow="visible";

body.style.height="auto";

这些样式正是对应CSS属性的默认样式。

然而这个方案有一个缺陷，就是ios系统下不兼容，黑幕的效果没法阻止页面的滚动。下面介绍移动端的另一种解决方案。

移动端解决方案

正是因为移动端的滚动基于屏幕的touch事件，因此诞生了方案二（手机淘宝就使用了这种方案）。

首先我们需要知道两个前提知识点：1、重叠的两个页面元素，z-index值更高的会优先触发事件监听，从而可以在此控制是否让事件流继续；2、移动端滚动的touch事件，基于事件流。

有了上面两个知识点的基础，我们就可以来理解这种方案的设计思路。方案二的原理是：不对原页面进行任何改动，仅仅只是用一个拥有更高z-index值的，布局为absolute或者fixed布局的黑幕（长宽100%）来挡住整个页面，并且监听黑幕的touchmove事件，在touchmove事件内结束事件流，从而阻挡事件流继续。这样，能够产生滚动效果的touch事件就传不到页面上，也就不会发生滚动。

移动端取消滚动条是达不到效果的，这时就需要去除遮罩层和按钮层的touchmove的默认事件，代码如下：

 mask.addEventListener("touchmove",function(e){

                    e.stopPropagation();

                    e.preventDefault();

                },false);

1. 关于滚动条：overflow:scroll（这个是出现滚动条，这个属性的其他的选择就是隐藏滚动条的，具体要看你的要求做选择了）;

2. 关于自适应：除了必要的div、或者一些标签必须要求定死，一般手机端为了适应各种分辨率是不会出现定死大小的用百分比的设置宽度（这就是自适应了），举个最简单的例zi

•      ｛

width：96%;


margin: 0 auto;

｝(无论是PC端、还是移动端。都比较推荐用自适应的，当然这些都是死的，人是活的，一些都要随机应变，不能太死脑筋)

搞了两天，最后发现是因为我的父元素加了flex布局，猜测是flex布局固定死了子元素的高度，使得子元素无法被内部元素撑开，无法超过父元素高度而失去滚动效果。

我的情况是在手机端打印父子元素的高度，两个高度是相等，并且父元素加了display:flex

之前也遇到过子元素无法滚动的情况，后来无意中解决了，没有把问题记录下来，想不到又踩坑了。

父元素只有一个子元素的情况下使用了flex布局就会产生无法滚动的情况。