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

时间:2011-10-10 19:55:35

标签: html

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

3 个答案:

答案 0 :(得分:11)

试试这个(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 :(得分:0)

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

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

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

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

topPosition = lineHeight * (lineNumber - 1);

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

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

我会玩这个,看看你是否可以使它工作。 :)

答案 2 :(得分:0)

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

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

示例:

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