我需要在pre中显示的代码部分指向特定的行号。如果预先有100行,我希望在150px框的中心显示为51行。
答案 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;
};