Firefox/Chrome上的滚动条行为 - 隐藏它，但能够向上滚动的功能？
问题描述：
我在为一个艺术项目，我用我可能已经解决了Chrome，但不是Firefox的一个小东西挣扎。我有一个页面，文本将由A.I通过MySQL数据库写入。很快，文本将会出现在它的容器中，所以我们设法隐藏了滚动条并按照写入过程而不让浏览器向上滚动。现在我试图让浏览器在进程暂停或完成时向上滚动。你可以在这里看到测试页：http://82.223.18.239/writing7.phpFirefox/Chrome上的滚动条行为 - 隐藏它，但能够向上滚动的功能？
我尝试了一些方法：
使用
overflow:hidden所有的时间。这不起作用，当写入过程暂停或完成时，观察者无法滚动。当写入暂停或完成时，从
overflow:hidden切换到overflow:scroll。在这种情况下，窗口被强制回到页面的顶部。这不好。我希望观点留在底部，写作暂停的地方。当写入暂停或完成时，从
overflow:hidden切换到overflow:scroll。在这种情况下，滚动条的位置很奇怪，我没有找到任何方法将它放回到右侧。无论我在尝试什么，它都会粘在myTables div上。当我试图在<body>上设置时，这根本不起作用。从
overflow:hidden切换到overflow:scroll并隐藏滚动条。这可能有点混乱，但它适用于Chrome，通过使用::-webkit-scrollbar {display: none;}，但它完全不适用于Firefox。
总之，我想以遵循写作过程中，像现在这样，我想用户能够滚动起来，只有当它的暂停或完成的，这让他/她阅读全文，但我没有找到任何工作。你能帮我一下吗？
其实，我试图通过showtext这部分功能改变#parent/#child div的溢出价值，但它也不管用。
else {
get_data(skip);
$('#body').css('overflow', 'hidden')
$('#myTable').css('overflow-y', 'scroll').css('overflow-x', 'hidden')
}
下面是实际全码：
<head>
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
<div id="myTable"> <div>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
#myTable{
width:"90%";
height:"100%";
min-width:250px;
white-space: pre-wrap;
word-wrap:break-word;
position:absolute;
border:solid 0px;
top:-500px;
left:320px;
right:320px;
bottom:0px;
font-size:103px;
font-family:"Times New Roman", Times, serif;
text-align:left
}
#body{
height:"100%";
min-width:250px;
}
#footer{
height:"0px";
}
::-webkit-scrollbar {display: none;}
</style>
</head>
<body>
<myTable>
<script type="text/javascript">
var skip = 0;
function get_data(index) {
$.ajax({
url : 'http://82.223.18.239/getData.php',
type : 'POST',
data: ({"skip":skip}),
success : function(data) {
if(data && data.trim()!='') {
skip = skip+1;
showText("#myTable", data, 0, 2);
}
else {
setTimeout(function() { get_data(skip); }, 30000);
}
},
error : function(request,error)
{
alert("Request error : "+JSON.stringify(request));
}
});
}
function showText(target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
setTimeout(function() { showText(target, message, index, interval); }, interval);
$('#myTable').css('overflow', 'hidden').bind('DOMNodeInserted', function() {
this.scrollTop = this.scrollHeight;
});
}
else {
get_data(skip);
$('#body').css('overflow', 'hidden')
$('#myTable').css('overflow-y', 'scroll').css('overflow-x', 'hidden')
}
}
//var period = 10000; //NOTE: period is passed in milliseconds
get_data(skip);
//setInterval(page_refresh, period);
</script>
</myTable>
</body>
<footer>
<SCRIPT LANGUAGE="JavaScript">
var message = new Array();
message[0] = ""
var reps = 2;
var speed = 666;
var p = message.length;
var T = "";
var C = 0;
var mC = 0;
var s = 0;
var sT = null;
if (reps < 1) reps = 1;
function doIt() {
T = message[mC];
A();
}
function A() {
s++;
if (s > 8) { s = 1;}
if (s == 1) { document.title = '✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊'+T+'✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊'; }
if (s == 2) { document.title = '☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠'+T+'☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️'; }
if (s == 3) { document.title = ''+T+'✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊'; }
if (s == 4) { document.title = '✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊'+T+'⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔'; }
if (s == 5) { document.title = ''+T+''; }
if (s == 6) { document.title = ''+T+''; }
if (s == 7) { document.title = ''+T+''; }
if (s == 8) { document.title = '✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊✊'+T+'⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳'; }if (C < (8 * reps)) {
sT = setTimeout("A()", speed);
C++;
}
else {
C = 0;
s = 0;
mC++;
if(mC > p - 1) mC = 0;
sT = null;
doIt();
}
}
doIt();
(function() {
var template = '✊☔☁☁☁☠⛔☁☁☁⏳☔⚠☁☁⛔⏳☠☁☁☁☁☁✊'.split(''),
len = template.length,
chars, string, i, j, k,
pushOrHash = typeof window.history.pushState === 'function',
increase = function(n) {
return n < len - 1 ? n + 1 : 0;
},
update = function() {
chars = [];
j = k;
for (i=0; i<len; i++) {
j = increase(j);
chars[i] = template[j];
}
string = ['/', chars.join(''), '/'].join('');
k = increase(k);
if (pushOrHash) {
window.history.pushState(null, null, string);
} else {
window.document.location.hash = string;
}
setTimeout(update, 1000);
};
update();
})();
</script>
</script>
<script type="text/javascript">
function pageLoad()
{
alert('The image of external things possesses for us the ambiguous dimension that in external nature everything can be considered to be connected, but also as separated. The uninterrupted transformations of materials as well as energies brings everything into relationship with everything else and make one cosmos out of all the individual elements. On the other hand, however, the objects remain banished in the merciless separation of space; no particle of matter can share its space with another and a real unity of the diverse does not exist in spatial terms. And, by virtue of this equal demand on self-excluding concepts, natural existence seems to resist any application of them at all. Only to humanity, in contrast to nature, has the right to connect and separate been granted, and in the distinctive manner that one of these activities is always the presupposition of the other. By choosing two items from the undisturbed store of natural things in order to designate them as -separate-, we have already related them to one another in our consciousness, we have emphasized these two together against whatever lies between them. And conversely, we can only sense those things to be related which we have previously somehow isolated from one another; things must first be separated from one another in order to be together. Practically as well as logically, it would be meaningless to connect that which was not separated, and indeed that which also remains separated in some sense. The formula according to which both types of activity come together in human undertakings, whether the connectedness or the separation is felt to be what was naturally ordained and the respective alternative is felt to be our task, is something which can guide all our activity. In the immediate as well as the symbolic sense, in the physical as well as the intellectual sense, we are at any moment those who separate the connected or connect the separate. Georg Simmel from -Bridges and Doors- 1909̿');
}
pageLoad();
</script>
</footer>
答
你以前可以使用overflow: -moz-scrollbars-none;但在最新版本的Firefox的贬值。
，并试图改变overflow-x或overflow-y也已经贬值了。
我建议将右边距（或滚动条所在的那一侧）设置为与滚动条宽度相等的值，仅为负值。然后当你想显示滚动条时，你所要做的就是调整边距。
请注意，根据您的布局，您可能还需要设置其他边距（顶部，底部和左侧），以使您的内容看起来一致并具有适当的间距。
答
我终于找到一种方法，做的正是我想要的。
对于谷歌Chrome和WebKit浏览器，你只需要做overflow:hidden和隐藏与::-webkit-scrollbar {display: none;}
对于其他浏览器的滚动条，你必须设置-MS-溢流式：none和使用
var textareaWidth = document.getElementById("yourdiv").scrollWidth;
document.getElementById("yourdiv").style.width = textareaWidth + "px";
更具体地讲，对我来说它的工作通过重写showtext功能是这样的：
function showText(target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
setTimeout(function() { showText(target, message, index, interval); }, interval);
$('#myTable').css('overflow', 'hidden').bind('DOMNodeInserted', function() {
this.scrollTop = this.scrollHeight;
});
}
else if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
get_data(skip);
$('#myTable').css('overflow', 'hidden')
document.getElementById("myTable").style.width = textareaWidth + "px";
}
else if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)){
get_data(skip);
$('#myTable').css('overflow', 'hidden').css('-ms-overflow-style', 'none')
document.getElementById("myTable").style.width = textareaWidth + "px";
}
else if (/MSIE 10/i.test(navigator.userAgent)){
get_data(skip);
$('#myTable').css('overflow', 'hidden').css('-ms-overflow-style', 'none')
document.getElementById("myTable").style.width = textareaWidth + "px";
}
else if (/Edge\/\d./i.test(navigator.userAgent)){
get_data(skip);
$('#myTable').css('overflow', 'hidden').css('-ms-overflow-style', 'none')
document.getElementById("myTable").style.width = textareaWidth + "px";
}
else {
get_data(skip);
$('#myTable').css('overflow', 'scroll')
}
}
+0
当然，它适用于Chrome和Firefox，但它不适用于IE，我只注意到... –
+0
嗯，我必须修改一些东西，因为它不能像这样工作，但如果在这个过程中工作，我明天再查。 –
谢谢！但是，如果我是正确的，为myTable div设置负边距会改变它的形状吗？或者我误解了？ –
我没有成功......似乎没有优雅的方式来隐藏Firefox的这个滚动条。但是，有没有办法让它回到正确的位置，并避免它被链接到myTable的div？ –
你有没有缓存它的原因？根据我对Javascript的理解（对JavaScript有所了解），我认为你可以实现一个缓存来保存文本的当前实例，然后你就可以预先加载它。这样，当页面加载完成后，可以显示文本（和滚动条）。 –