Блог

Главная - Вопросы по программированию - Как мне получить для отображения в определенной строке прокрутки?

Как мне получить для отображения в определенной строке прокрутки?

#html

#HTML

Вопрос:

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

Ответ №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»

Комментарии:

1. 7 лет спустя … было бы неплохо объяснить, как это должно работать. Кстати: pc это pica: One pica . 1pc = 12pt = 1/6 из 1in . Смотрите Значения и единицы измерения CSS и <length> в MDN. Но, как и пиксели, это также единица абсолютной длины ( 1px = 1/96-я часть 1in ), и поэтому существует много ситуаций, когда это, вероятно, не работает.

Ответ №2:

Вы можете сделать это с помощью scrollTop в jQuery:

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

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

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

 topPosition = lineHeight * (lineNumber - 1);

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

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

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

Ответ №3:

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

Остальное — это некоторая математика и использование scrollTop свойства.

пример:

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