防止Chrome強制將光標滾動到視圖中

我們正在研究一個文本編輯器（基於textarea），它將「畫布」移動到右側以顯示左側的菜單。非常標準的幻燈片顯示菜單。防止Chrome強制將光標滾動到視圖中

菜單是一個文檔列表，當你點擊一個文檔時，textarea被選定的文檔文本填滿，光標通過selectionRange/Range被設置爲最後保存的位置。

這裏變得很時髦：textarea的一部分在屏幕的右側，如果光標放置在那裏（甚至在那附近），Chrome會將canvas div滾動到左側，儘管位置爲：relative。

有什麼辦法可以防止這種情況發生？

HTML：

<body> 
<div id="wrapper"> 
    <div id="canvas> 
     <textarea> 
    </div> 
</div> 
</body>

CSS：

#wrapper { 
position: absolute; 
left: 300px; /* set via js, to show the menu */ 
right: 0; 
overflow: hidden; 
} 

#canvas { 
position: relative; 
width: 1440px; /* viewport width set via js */ 
} 

textarea { 
width: 100%; /* this properly relates to the fixed width canvas parent */ 
}

來源

2014-11-08 Bruno

除了刪除滾動條之外，沒有真正的方法可以防止滾動。 – adeneo 2014-11-08 13:46:54

未將'＃canvas'的設置位置固定爲一個選項嗎？ – 2014-11-08 14:03:19

不幸的是，如果文檔長度比視口高度長等，這會搞亂很多其他的東西，比如垂直滾動。 – Bruno 2014-11-08 14:09:37

嘗試使用CSS溢出：

body { 
    overflow: hidden; 
}

不知道是否因爲沒有提供完整的代碼，這將解決您的問題，但我希望這個能幫上忙！

來源

2014-11-29 00:34:32

OP在這裏：這似乎是不可預知的。問題是，如果光標位置位於影子DOM元素的溢出部分，因此Chrome將移動inner-editor（=文本區域內容），直到光標位於文本區域的任何部分可見爲止。

Afaik因爲這是影子DOM的一部分，所以如果不用默認的textarea替換你自己的Web組件，就很難改變這種行爲。

在我們的案例中，這個問題部分混亂，因爲textarea的內容包含了長時間的空白字符變化，這些字符沒有被包裹，但也不可見。

我們應用的解決方案是scrollhandlers，它在瀏覽器移動它後立即將所有內容都返回到它的預期位置。

來源

2015-01-13 09:08:14 Bruno

防止Chrome強制將光標滾動到視圖中

回答

相關問題