Question

我正在尝试编写一个无限滚动的怪物（例如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>

Answer 1

添加了前缀{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>

Answer 2

重置预边距。

pre {margin:0}

无法删除垂直元素之间的空间

2 个答案: