Блог

У меня есть div со многими текстовыми строками в нем. Div ограничен по высоте, и, следовательно, у меня есть scroll . Есть ли способ java script прокрутить до указанной строки.

Если бы это было на html странице, я всегда могу сделать это с помощью закладок, как это сделать для полей форматированного текста или любого другого html container с помощью java script.

Любая помощь высоко ценится.

Nandish

Проблема, с которой вы сталкиваетесь здесь, заключается в понятии «строка». Поскольку у вас есть окно, нарисованное в браузере, с заданной шириной (возможно, динамической) и текстом внутри него, строки зависят от переноса.

Например, текст: «привет, мир, мне нужна моя пицца прямо сейчас» будет состоять из двух строк, если ширина действительно мала, или из одной строки, если ширины достаточно, чтобы вместить этот текст.

Я имею в виду, что «строка» — это понятие, относящееся к самому переносу, поэтому даже подсчет строк внутри div невозможен.

Другое дело, если ваши строки определены пользователем с помощью перевода строк и возврата каретки, или с помощью
или чего-то еще, но если строки генерируются путем переноса, это происходит во время рендеринга, и вы понятия не имеете, как это произойдет.

Если у вас фиксированный размер шрифта, вы можете определить количество строк простым разделением высоты поля / размера шрифта пробел между строками.

Однако, если ваш текст является расширенным, он может содержать изображения и т.д., И это не сработает.

Другим возможным решением является использование getClientRects (это сработало для меня)

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

который возвращает коллекцию объектов text rectangles:

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

Надеюсь, это немного поможет, я сталкивался с этой проблемой дважды раньше, и это не так просто для вызова функции, вы должны понимать, что означает строки, перенос, clienrects, textrectangles, шрифты…

Удачи!

Если вы имеете в виду <div contenteditable="true"> , вы можете попробовать это: http://jsfiddle.net/cMMy5 /.

По сути, это scrollTop свойство div.

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