Предотвращение автоматического прокрутки 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 дел.

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