Scrolling to the bottom of a div on page load: issue with syntaxhighlighter

Posted by Rayne on Stack Overflow See other posts from Stack Overflow or by Rayne
Published on 2010-05-12T08:10:43Z Indexed on 2010/05/12 8:14 UTC
Read the original article Hit count: 257

I've been using this code:

var objDiv = document.getElementById("code");
objDiv.scrollTop = objDiv.scrollHeight;

to scroll to the very bottom of the div. It worked perfectly in FF and Chrome (I asked a question about it not working in Chrome a few days ago, but it appears the guy who was testing it on Chrome was incorrect, so I tested it myself) until I started syntax highlighting the code that I put in the div with SyntaxHighlighter.

Before, I was putting the code in a <p> and breaking lines with <br />, but the <br /> stuff doesn't fly with SyntaxHighlighter, so I replaced all of those with newlines (not entirely certain if this is important, but it's worth mentioning).

Now, when the page loads, it does scroll, but not all the way down. It scrolls nearly to the bottom. I've tried all the methods listed in the other question I mentioned but they all do the same thing, or nothing at all.

Is there anything else I can try? Here is the relevant piece of the generated HTML. Forgive the poor formatting, I'm not writing the HTML by hand, but rather using Hiccup with Clojure, and it doesn't bother with formatting.

<div class="scroll" id="code"><pre class="brush: clojure">=> (doseq [x (range 1 100)] (println x))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
nil

</pre></div><script type="text/javascript">var objDiv = document.getElementById("code");
objDiv.scrollTop = objDiv.scrollHeight;</script>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about syntaxhighlighter