我正在为一个艺术元素工作，我正在努力解决一些我可能已经为 Chrome 而不是为 Firefox 解决的小问题。我有一个页面，其中的文本将由 A.I 通过 MySQL 数据库编写。很快，文本将超出其容器，因此我们设法隐藏滚动条并遵循书写过程，而不允许查看器向上滚动。现在我试图让查看器在进程暂停或完成时向上滚动。你可以在这里看到测试页面:http://82.223.18.239/writing7.php
我尝试了几种方法:
使用
overflow:hidden每时每刻。这不起作用，当写入过程暂停或完成时，查看器无法向上滚动。从
overflow:hidden切换至overflow:scroll当写作暂停或完成时。在这种情况下，窗口被强制返回到页面顶部。这不好。我希望 View 停留在底部，写作暂停的地方。从
overflow:hidden切换至overflow:scroll当写作暂停或完成时。在这种情况下，滚动条的位置很奇怪，我没有找到任何方法将其放回右侧。无论我在做什么，它都粘在 myTables div 上。当我尝试在<body>上设置它时这根本不起作用。从
overflow:hidden切换至overflow:scroll并隐藏滚动条。它可能有点乱，但它适用于 Chrome，通过使用::-webkit-scrollbar {display: none;}但它对 Firefox 根本不起作用。
总而言之，我希望 View 能够像现在一样跟随写作过程，并且我希望用户能够仅在暂停或完成时向上滚动，从而允许他/她阅读全文但我还是没有找到让它工作的方法。你能帮我一下吗？
实际上，我试图通过 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 也已被贬值。
我建议将右边距(或滚动条所在的一侧)设置为等于滚动条宽度的值，只能为负值。然后当你想显示滚动条时，你所要做的就是调整边距。
请注意，根据您的布局，您可能还必须设置其他边距(顶部、底部和左侧)，以使您的内容看起来一致并具有适当的间距。
关于javascript - Firefox/Chrome 上的滚动条行为 - 隐藏它但能够向上滚动的功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45526698/