Question

此行为仅在chrome中发生（我使用的是版本41.0.2272.118）。金丝雀不会发生这种情况。
如果有的话，我仍然想要一个解决方法。

你可以在this pen中看到它的实际效果在textarea输入文本（包括Enter），看看div如何滚动，
但是如果你将表单的样式更改为底部：150px而不是0（这会导致textarea位于div的顶部），它将不会滚动div。

这是结构：

<div class="pageCont">
  <div class="cont">
    <div class="innerCont">
       <div>Item 1</div>
       <div>Item 2</div>
       <div>Item 3</div>
       <div>and a lot more of these</div>
    </div>
    <form action="">
      <textarea name="" id="" cols="30" rows="5"></textarea> 
    </form>
  </div>  
</div>

和css：

html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
.pageCont{
  height:300px;
  padding-bottom:90px;
}
.cont{
  overflow: auto;
  height:100%;
  width:300px;

}
.innerCont{
  position:relative;
}
form
{
  position:fixed;
  bottom:0;
  //bottom:150px;
  width:100%;
  //top:50px; //doesn't happen in this case
}
textarea{
  dosplay:block;
  width:100%;
  height:80px;
}

Answer 1

很奇怪，但我可能有一个修复。

我发现通过将form移到div.innerCont之外它会停止滚动行为，所以我只能想到，因为它在里面，浏览器试图滚动到div.cont的底部{1}}显示。请在此处查看更新后的笔：http://codepen.io/anon/pen/XbWaLW

显然有些错误因为position:fixed应该从页面的正常流程中删除该元素，但希望这可以提供帮助。

在具有固定位置的textarea中输入文本在chrome中向下滚动包含容器

1 个答案: