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

使用位置：固定されました。代わりに絶対だけのcontentEditable DIVの幅のピクセル値を与える

.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

以下のようにスクロールを停止すること。ここで

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