移动端常见问题

一、弹窗滚动穿透
移动端页面出现弹窗，当滚动弹窗的时候，页面内容也会随之滚动，该如何解决呢？
css部分：

.modal-show {
	position: fixed;
	width: 100%;
}

js部分：
—modal open—

var scrollTop;
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add('modal-show');
document.body.style.top = -scrollTop + 'px';

—modal close—

document.body.classList.remove('modal-show');
document.scrollingElement.scrollTop = scrollTop;

二、图片宽度占屏幕100%，宽高比固定比例，css实现
方法一：
img-container盛装图片的容器，例如一张4:3图片高=宽*75%, 所以用padding-top:75%撑起高度，一个4:3 的容器打造好了；
img需要用到绝对定位，否则会溢出容器。

.img-container {
	width: 100%;
	position: relative;
	padding-top: 75%;
	img {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
}

方法二：
视口被分为100单位的vw，高=宽*75%，所以高为75vw。

.img-container {
	width: 100vw;
    height: 75vw; 
}

三、ios拉动滑动条卡顿
-webkit-overflow-scrolling属性
-webkit-overflow-scrolling：auto；手指移开屏幕，滚动停止
-webkit-overflow-scrolling：touch；手指移开屏幕，滚动回弹效果。
ios滚动卡顿，值设置为touch即可。

未完待续…