web app 页面有滚动时 组件就乱了

Question

框架为phonegap，html页面中如果有overflow:auto的话，里面的元素比如input,select等组件就会出现乱浮动现象，有懂的希望解释下，谢谢。

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

这个问题是由于HTML5中的<div>标签在滚动时会自动调整其宽度和高度而引起的。当使用overflow:auto属性来控制元素的溢出显示时，这些元素会在滚动条出现时重新计算其大小。

解决方案：

1. CSS：通过设置display: flex;或flexbox;来改变<div>标签的布局方式，从而避免其在滚动时自动调整大小的问题。例如：

div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

1. JavaScript：可以使用window.innerWidth和window.innerHeight变量来获取当前窗口的尺寸，并根据这个尺寸来设置元素的宽高。这样可以在滚动时动态地调整元素的大小，避免因溢出显示导致的混乱。

var div = document.getElementById('yourDivId');
var width = window.innerWidth;
var height = window.innerHeight;

div.style.width = (width - 1) + 'px'; // 计算出实际可用宽度并减去一个像素值以防止溢出
div.style.height = (height - 1) + 'px';

以上两种方法都可以解决您遇到的问题。如果您正在使用PhoneGap开发Web应用，请确保您的项目已经配置了适当的CSS样式表文件，以便正确应用上述解决方案。