Open wisetc opened 6 years ago
设置了 fixed 定位的元素,如果其尺寸足够大(例如占满整屏),则在该容器元素内部可能会滑不动。例如代码
position: fixed; overflow-y: scroll; left: 0; top: 0; width: 100%; height: auto;
上面的代码,当容器(例如列表容器)元素宽度足够大,且高度超出整屏时,将导致在其内部无法滑动,超出屏幕部分则无法阅读。因为其内容在其自身尺寸范围内没有产生溢出。解决办法是设置 fixed 的元素的高度为一个固定的值,例如 100vh。
100vh
height: 100vh; position: fixed; overflow-y: scroll; left: 0; top: 0; width: 100%;
对于iso webapp溢出可滑动区域卡顿的问题,有如下的解法。设置css样式-webkit-overflow-scrolling: touch;,对于mac 上的chrome,该属性值无效。
-webkit-overflow-scrolling: touch;
/*设置 -webkit-overflow-scrolling: touch;*/ .page-body { min-height: 1.5rem; height: calc(100vh - 1rem); overflow: scroll; -webkit-overflow-scrolling: touch; }
参考https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
iscroll利用transform原理来进行移动端的滑动,但是会影响其内部的采用了fixed定位的元素,使其不能永久相对固定于viewport。
如果需要为移动端页面中的元素设置 :active 伪元素,那么需要设置元素的onTouchStart设置为空。
onTouchStart
请参考,:active pseudo-class doesn't work in mobile safari
On iOS, mouse events are sent so quickly that the down or active state is never received. In other words, setting an ontouchstart event (even if it's empty) is explicitly telling the browser to react to touch events.
例如,将基颜色变浅 10%,可以用 lighten( $base-color, 10% )。
lighten( $base-color, 10% )
请参考,Controlling color with Sass color functions
Safari 页面内的底部按钮被工具条遮挡,https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
尺寸
交互
fixed 定位对滑动的影响
设置了 fixed 定位的元素,如果其尺寸足够大(例如占满整屏),则在该容器元素内部可能会滑不动。例如代码
上面的代码,当容器(例如列表容器)元素宽度足够大,且高度超出整屏时,将导致在其内部无法滑动,超出屏幕部分则无法阅读。因为其内容在其自身尺寸范围内没有产生溢出。解决办法是设置 fixed 的元素的高度为一个固定的值,例如
100vh
。iso滑动的原生优化
对于iso webapp溢出可滑动区域卡顿的问题,有如下的解法。设置css样式
-webkit-overflow-scrolling: touch;
,对于mac 上的chrome,该属性值无效。参考https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
transform对内部元素的影响
iscroll利用transform原理来进行移动端的滑动,但是会影响其内部的采用了fixed定位的元素,使其不能永久相对固定于viewport。
iso :active
如果需要为移动端页面中的元素设置 :active 伪元素,那么需要设置元素的
onTouchStart
设置为空。请参考,:active pseudo-class doesn't work in mobile safari
sass 颜色函数
例如,将基颜色变浅 10%,可以用
lighten( $base-color, 10% )
。请参考,Controlling color with Sass color functions