我正在尝试编写一个无限滚动的怪物（例如endless.horse，但没有jQuery）。但是在滚动时，它一直显示元素之间的空格，但效果并不理想。设置行高只会将行混合在一起成为一个怪异的斑点，什么也做不了。空白不能阻止空格。我该怎么办？
window.onscroll = function() {hello()};
function hello() {
var para = document.createElement("pre");
var node = document.createTextNode(` | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
`);
para.appendChild(node);
var element = document.getElementById("hello");
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
}<html>
<head>
<title>My first three.js app</title>
<script src="myScript.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#hello
float: left;
padding: 0;
margin: 0;
display: inline-block;
}
pre {
padding: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<pre>
_-~~~-_ _-~~~-_
/~ ~\ : , \
' ~ , |: :
{ /~~\ :--~""""\.: :
\ (... : /^\ /^\ ;
~\_____ | | | |:~
/ |__O|_|_O|;
( / O \
\ ( `\_______/)
`\ \ /
) ~-------~'\
/ \
: ||
| | ||
| |.======[]==+'|
(~~~~) | |~)
/ \ | | \
~\ \___/)______/^\__|_/
`\ // | | | |
`\__//' | | | |
~~ | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
</pre>
<div id="hello">
</div>
</body>
</html>最佳答案
添加前{margin：0;}
window.onscroll = function() {hello()};
function hello() {
var para = document.createElement("pre");
var node = document.createTextNode(` | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
`);
para.appendChild(node);
var element = document.getElementById("hello");
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
element.appendChild(para);
}pre{margin:0;}<html>
<head>
<title>My first three.js app</title>
<script src="myScript.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#hello
float: left;
padding: 0;
margin: 0;
display: inline-block;
}
pre {
padding: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<pre>
_-~~~-_ _-~~~-_
/~ ~\ : , \
' ~ , |: :
{ /~~\ :--~""""\.: :
\ (... : /^\ /^\ ;
~\_____ | | | |:~
/ |__O|_|_O|;
( / O \
\ ( `\_______/)
`\ \ /
) ~-------~'\
/ \
: ||
| | ||
| |.======[]==+'|
(~~~~) | |~)
/ \ | | \
~\ \___/)______/^\__|_/
`\ // | | | |
`\__//' | | | |
~~ | | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
</pre>
<div id="hello">
</div>
</body>
</html>