我如何获得<pre style="overflow: scroll; height : 150px"> to display at particular scroll line?</pre>

Question

我需要在pre中显示的代码部分指向特定的行号。如果预先有100行，我希望在150px框的中心显示为51行。

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

您可以使用jQuery中的scrollTop执行此操作：

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

其中scrollPosition是“在可滚动区域上方隐藏的像素数”。

困难在于弄清楚这个价值应该是什么。如果您知道每行的高度（您可以使用CSS中的font-size设置，则可以使用：

topPosition = lineHeight * (lineNumber - 1);

但是你希望指定的行位于容器的中间，所以也许：

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

我会玩这个，看看你是否可以使它工作。 ：）

Answer 3

要实现这一点，您需要pre元素的固定行高。对于150px高度，我建议line-height为15px，font-size为11px。这将确保可滚动区域中的10行。

其余的是一些数学并使用scrollTop属性。

示例：

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