Question

我的图像元素可以编辑。当光标离开包装器时，在文本内部写入文本时，它会滚动并放在视图中。如何解决它（如果可能只使用CSS，不希望改变结构）。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

Answer 2

受@Julian D.启发的解决方案awesome hack 仍然不完美，因为由于不透明度的转换，在某些时候会出现一些奇怪的闪烁。

＆＃13;

body {
  overflow: hidden;
}

.wrap {
  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;
  max-width: 60px;
}

img {
  width: 100%;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    var editableElement = $('#editable'), clonedElement;

    // Revert any scrolling                    
    editableElement.on("scroll", function(event) {
      editableElement.scrollTop(0);

      // Try to prevent scrolling completely (doesn't seem to work)
      event.preventDefault();
      return false;
    });

    // Switch overflow visibility on and off again on each keystroke.
    // To avoid flickering, a cloned element is positioned below the input
    // and switched on while we hide the overflowing element.
    editableElement.on("keydown", function() {

      // Create a cloned input element below the original one
      if (!clonedElement) {
        var zIndex = editableElement.css('zIndex');
        if (isNaN(parseInt(zIndex, 10))) {
            zIndex = 10;
            editableElement.css({zIndex: zIndex});
        }    

        clonedElement = editableElement.clone();
        clonedElement.css({
            zIndex: zIndex-1,
            position: 'absolute',
            top: editableElement.offset().top,
            left: editableElement.offset().left,
            overflow: 'hidden',
            // Set pseudo focus highlighting for webkit
            // (needs to be adapted for other browsers)
            outline: 'auto 5px -webkit-focus-ring-color'
        });
        editableElement.before(clonedElement);
      } else {
        // Update contents of the cloned element from the original one
        clonedElement.html(editableElement.html());
      }

      // Here comes the hack:
      //   - set overflow visible but hide element via opactity.
      //   - show cloned element in the meantime
      clonedElement.css({opacity: 1});
      editableElement.css({overflow: 'visible', opacity: 0});

      // Immediately turn of overflow and show element again.
      setTimeout(function() {
        editableElement.css({overflow: 'hidden', opacity: 1});
        clonedElement.css({opacity: 0});
      }, 0);

    });
  });
</script>

<div class="wrap">
  <img src="http://placehold.it/350x150"/>
  <div id="editable" class="item" contenteditable="true">Write HERE to get very long text and see scroll</div>
</div>

＆＃13;

Answer 3

使用位置：固定;而不是绝对会停止滚动，如下所示

＆＃13;

.wrap {
  position: relative;
  border: 1px solid red;
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
}

.wrap .item {
  position: fixed;
  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;
}

＆＃13;

<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>

＆＃13;

Answer 4

只需为contenteditable div的宽度提供像素值。

.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%;
  width:100px;
  background: rgba(20, 20, 20, .5);
  color: white;
  padding: 10px 15px;
  display: inline-block;
  overflow-x: auto;
}

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>

防止自动滚动的contenteditable

4 个答案: