jquery - 防止 contenteditable 的自动滚动

Question

我有可编辑的图像元素。当光标离开 wrapper 时在其中写入文本时，它会滚动并放置在 View 中。如何修复它(如果可能只使用 CSS，最好不要改变结构)。

.wrap {
  position: relative;
  border: 1px solid red;
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
}

.wrap .item {
  position: absolute;
  white-space: nowrap;
  left: 70%;
  top: 50%;
  background: rgba(20, 20, 20, .5);
  color: white;
  padding: 10px 15px;
  display: inline-block;
}

img {
  width: 100%;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrap">
  <img src="http://placehold.it/350x150"/>
  <div class="item" contenteditable="true">Write HERE to get very long text and see scroll</div>
</div>

Answer 1

这是我更新的代码。行不会中断，图像也不会滚动:

.wrap {
  position: relative;
  border: 1px solid red;
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
}

.wrap .item {
  position: absolute;
  white-space: nowrap;
  left: 70%;
  top: 50%;
  background: rgba(20, 20, 20, .5);
  color: white;
  padding: 10px 15px;
  display: inline-block;
  right: 0;
  overflow: hidden;
}

img {
  width: 100%;
  display: block;
  position: sticky;
  top: 0; left: 0; right: 0; bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrap">
  <img src="http://placehold.it/350x150"/>
  <div class="item" contenteditable="true">Write HERE to get very long text and see scroll</div>
</div>