編輯textarea時，如何防止包含div滾動到它？

我正在開發一個網站，用戶可以在其中創建textareas並將它們移動，因爲它們像一個容器div內的溢出：hidden - 對應於一張紙。編輯textarea時，如何防止包含div滾動到它？

當textarea被放置在容器的邊緣時（即，只有一些textarea可見），我的問題就出現了。當用戶鍵入textarea並且脫字符移出可見部分時，容器將滾動以顯示所有textarea。

嘗試一下在這個小提琴的textarea的分號後輸入的東西： http://jsfiddle.net/PG8SU/2/

<div class="container"> 
    <p>Some other text</p> 
    <textarea>Type:</textarea> 
</div> 

.container { 
    position:absolute; 
    width:300px; 
    height:500px; 
    border:2px solid blue; 
    overflow:hidden; 
    top: 50px; 
    left:100px; 
} 
textarea { 
    position:absolute; 
    display:block; 
    left:250px; 
    width:100px; 
    top:200px; 
}

這似乎是大多數瀏覽器，如Chrome和IE瀏覽器的默認行爲。我想避免任何滾動的容器，並且即使用戶輸入textarea也只能保持部分可見。

有沒有人有這樣做的想法？

來源

2013-04-04 Daniel

在仔細研究了一下之後，我相信這樣做不是完全可行的。（）。（「。container」）。width（） - $（「textarea」）。position（）。這個是一個奇怪的用例，當然，通常你最好將文本區域的寬度設置爲$ （）.left，但！如果確實需要在容器外的文本，你需要它溢出，這將這類工作：

$("textarea").keyup(function() { 
    $(".container").scrollTop(0).scrollLeft(0); 
}).keydown(function() { 
    $(".container").scrollTop(0).scrollLeft(0); 
});

我在你的jsfiddle跑了這一點，它會導致屏幕，當你鍵入閃爍，但它最終會禁用滾動。這並不理想，但這是我認爲你會找到的最好的。

來源

2013-08-08 19:57:42 wampastompa

編輯textarea時，如何防止包含div滾動到它？

回答

相關問題