css影响手机向下滑动会向上弹

最近有不少用户反馈，在手机端使用CSS样式时，会出现向下滑动页面时会出现向上弹的现象。这种情况是由于CSS样式的设定与手机硬件操作的不同导致的。下面我们来看一下这种现象的产生原理及解决办法。

首先，我们需要了解CSS中的一些基础知识。在CSS中，height、max-height、min-height、padding和margin等属性值单位中，如果采用%作为单位，那么它的计算方式将会是基于祖先元素的高度值。但是，在手机端，需要注意一些细节，比如手机浏览器窗口高度大小会根据浏览器顶部地址栏的显隐状态而不同。

在上述情况下，出现向下滑动页面时会出现向上弹的现象。这是因为当使用百分比作为高度计算属性时，浏览器会根据不同的窗口高度进行计算，同时手机界面有个特点就是会有地址栏占据屏幕高度的一部分，当我们向下滑动页面时，浏览器会根据新的可视区域重新计算元素高度，导致元素大小改变，出现向上弹的现象。

如果想要避免这种情况，我们可以采用Box-sizing:border-Box属性，将padding、border计算进height中，从而避免元素高度随浏览器窗口改变而变化导致向上弹的现象。

.Box{
  Box-sizing: border-Box;// 将padding计算进height中
  height: 100%;
  padding: 10%;
}

通过上述内容，相信大家已经了解了CSS样式引起手机界面向下滑动时出现向上弹的现象产生原理及解决办法。在手机端使用CSS样式时，需要特别注意一些常见问题，只有了解CSS样式的计算方式才能更好地排除问题并达到预期的效果。