如何使用java腳本滾動到富文本框中的指定行

Question

我有一個帶有許多文本行的div。該div是高度限制，因此我有一個scroll。有沒有辦法在java script上滾動到指定的行。

如果它已在html頁面我總是可以用書籤來做到這一點，如何使用豐富的文本框或任何html container與java腳本的幫助。

任何幫助非常感謝。

Nandish

Answer 1

您在這裏遇到的問題是「行」的概念。既然你有一個在瀏覽器中繪製的盒子，它有一個給定的寬度（也許是動態的），並且裏面有文本，這些行依賴於包裝。

例如，如果寬度非常小，或者單行，如果寬度足以適合該文本，則文本：「hello world，現在我需要我的比薩餅」將是兩行。

我的意思是，「行」是一個相對於包裝本身的概念，所以即使在div內計數行也不可能。

這是不同的，如果你的線由用戶定義，換行和回車，或與
或任何，但如果線條生成的包裝，這發生在渲染時間，你不知道它將如何發生。

如果你有一個固定的字體大小，你可以通過簡單的劃分盒子的高度/字體大小+行間距來推測行數。

但是，如果你的文字很豐富，它可以包含圖像等，這是行不通的。

另一種可能的解決方案是使用getClientRects（這個工作對我來說）

https://developer.mozilla.org/en/DOM/element.getClientRects

返回文本矩形對象的集合：

http://help.dottoro.com/ljgupwlp.php

希望這有助於一點，我以前曾經遇到這個問題兩次，而且它不像函數調用那麼簡單，你應該明白什麼是線條，包裝，clienrects，textrectangles，字體......

祝你好運！

Answer 2

如果你說的是<div contenteditable="true">，你可以試試這個：http://jsfiddle.net/cMMy5/。

基本上它是div的scrollTop屬性。

$div = $('div'); 
$('button').click(function() { 
    $div.get(0).scrollTop = 10; 
});