НЕ РЕШЕНИЕ! Но это может спровоцировать чье-то понимание решения.
Это автономный HTML/CSS/javascript, который работает на сафари/хром. У меня аналогичная проблема с firefox/mozilla (IE неизвестен). Перетащите окно до минимального размера, затем прокрутите два поля. Я хотел бы найти исправление для mozilla и IE. Исправлены CSS-слова «-moz» и «-webkit» без успеха.
<!DOCTYPE html>
<html lang="en-US"> <!-- Small window. PASS: chrome/safari. FAIL: Firefox. -->
<head>
<meta charset="utf-8" />
<meta name="keywords" content="scrolling" />
<meta name="description" content="asynchronous character-at-a-time chat" />
<title>scrolling</title>
<script type="text/javascript">
function hDoc(f) { return f.toString().replace(/.*\/\*([^\*]*).\/.*/, '$1'); }
function fillContent(lbl,txt) { document.getElementById(lbl).innerHTML = txt; }
function loadContent() {
labelA = hDoc(function() {/* Shakespeare sonnet CXVI: */});
verseA = hDoc(function() {/* <pre>
Let me not to the marriage of true minds
Admit impediments. Love is not love
Which alters when it alteration finds,
Or bends with the remover to remove:
O, no! it is an ever-fixed mark,
That looks on tempests and is never shaken;
It is the star to every wandering bark,
Whose worth's unknown, although his height be taken.
Love's not Time's fool, though rosy lips and cheeks
Within his bending sickle's compass come;
Love alters not with his brief hours and weeks,
But bears it out even to the edge of doom.
If this be error and upon me proved,
I never writ, nor no man ever loved.
</pre> */});
labelB = hDoc(function() {/* Shakespeare sonnet CX: */});
verseB = hDoc(function() {/* <pre>
Alas! 'tis true, I have gone here and there,
And made my self a motley to the view,
Gored mine own thoughts, sold cheap what is most dear,
Made old offences of affections new;
Most true it is, that I have looked on truth
Askance and strangely; but, by all above,
These blenches gave my heart another youth,
And worse essays proved thee my best of love.
Now all is done, have what shall have no end:
Mine appetite I never more will grind
On newer proof, to try an older friend,
A god in love, to whom I am confined.
Then give me welcome, next my heaven the best,
Even to thy pure and most most loving breast.
</pre> */});
content = [
['labelA', labelA], ['labelB', labelB],
['verseA', verseA], ['verseB', verseB]
];
for (i=0; i<content.length; i+=1) fillContent(content[i][0], content[i][1]);
}
</script>
<style type="text/css">
html, body { height:94%; line-height:60%; }
table { border-collapse:collapse; }
table { position:absolute; top:0; bottom:50%; left:0; right:0; }
table { height:100%; width:100%; }
div { height:100%; width:100%; overflow:auto; }
td { width:100%; padding:1px; vertical-align:top; }
th.headerA { height:8px; background-color:#000; text-align:center; }
th.headerB { height:8px; background-color:#FFF; text-align:center; }
#labelA { background-color:#000; color:#0C0; font-size:8px; }
#labelB { background-color:#FFF; color:#C00; font-size:8px; }
#cellA { background-color:#000; }
#cellB { background-color:#FFF; }
#verseA { color:#FFF; font-size:10px; }
#verseB { color:#000; font-size:10px; }
</style>
</head>
<body onLoad="loadContent()">
<table>
<th class="headerA"><b id="labelA"></b></th>
<tr><td id="cellA"><div id="verseA"></div></td></tr>
<th class="headerB"><b id="labelB"></b></th>
<tr><td id="cellB"><div id="verseB"></div></td></tr>
</table>
</body>
</html>