防止contenteditable自动滚动

Question

我有可编辑的图像元素。当光标离开包装器时，在其中写入文本时，它会滚动并放置在视图中。如何解决它（如果可能的话，只使用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: 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; 
 
}

<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

只要给像素值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>

Answer 3

这是我更新的代码。行不会打破，而图像不会滚动：

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

通过@Julian启发D. awesome hack 还不够完善一个解决方案，有一些奇怪的闪烁，显示由于在某一时刻到不透明度的切换。

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

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