Как получить <pre style = "overflow: scroll; height: 150px"> для отображения на определенной строке прокрутки?

Question

Мне нужно, чтобы раздел кода, показанный в pre, указывал на конкретный номер строки. Если в начале есть 100 строк, я хочу, чтобы это была строка 51 справа в центре поля 150px.

Answer 1

Попробуйте это (для 10 строк):

<pre style="width: 300px; height: 10pc; overflow-y: scroll;">
1
2
3
4
5
6
7
8
9
10
11
12
 </pre>

Обратите внимание на "pc" вместо "px"

Answer 2

Для этого вам нужна фиксированная высота линии pre элемент. Для высоты 150px я предлагаю 15px для line-height и 11px для font-size, Это обеспечит 10 строк в области прокрутки.

Остальное - математика и использование scrollTop имущество.

пример:

function goToLine(centeredLine){
    var pre = document.getElementById('scrollablePre');
    pre.scrollTop = (centeredLine - 5) * 15;
};

Answer 3

Вы можете сделать это используя scrollTop в jQuery:

$("#code").scrollTop(topPosition);

где scrollPosition это "количество пикселей, которые скрыты от просмотра над прокручиваемой областью".

Сложность состоит в том, чтобы понять, какой должна быть эта ценность. Если вы знаете высоту каждой строки (которую вы можете установить с помощью font-size в CSS вы можете использовать:

topPosition = lineHeight * (lineNumber - 1);

Но тогда вы хотите, чтобы указанная строка была в середине контейнера, поэтому, возможно:

topPosition = lineHeight * (lineNumber - 1) - 70;
if (topPosition < 0) topPosition = 0;

Я бы поиграл с этим и посмотрел, сможешь ли ты заставить это работать.:)