Question

So I got this domain in a host site that allows only HTML and Javascript. The idea is to create a long scroll page, but the only way I find how to create it includes CSS. So I was hopeful that it can be done using only HTML and Javascript... Can it happen?

Answer 1

很难想象一个不允许使用CSS的主机站点但是，如果这是您想要的方式，您可以将所有CSS定义为HTML中的内联样式，或者，您可以通过Javascript应用CSS。使用常规javascript，它看起来像这样

var blah= document.getElementById('whatever');
blah.style.background-color= "green";

使用Jquery，它看起来更像是

$('#whatever').css("background-color", "green");

您可以为要添加的任何CSS属性执行此操作。尽管Gavin Foster所说的是正确的，但HTML文档的整体高度将根据内容进行调整，因此只要有足够的内容来填充页面，就不需要额外的CSS来使页面上下滚动。问题是，如果没有CSS，你就无法给出任何高度，因此，你最终可能会看到看起来很拥挤的页面，并且可能很难生成足够的内容来填充你想要填充的空间。上述技术可以解决这个问题。

或者，您可以通过2种方式之一在HTML中定义CSS。你可以做这样的事情

<div style="background-color:blue;">This is a Blue Div</div>

您只需在该元素的实际HTML标记中添加所有CSS样式。这将使HTML文档更加混乱，您将无法使用和重复使用类。

或者，您基本上可以将整个CSS文档放在HTML文档的头部。像这样：

<!DOCTYPE html>
<html lang="en"
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style type="text/css">
    body {
      background-color: #00D1AC;
    }
    .whatever-class{
      height: 500px;
      width: 500px;
      overflow: scroll;
    }
  </style>

</head>
<body>
... here, you put all the content of the body of the page
</body>
</html>

将通常放在单独的CSS文档中的所有内容放在HTML头中的<style>标记内。这样，您可以像使用CSS一样使用类。对于您的情况，这可能是最简单/最懒的解决方法。

Is it possible to create a Long Scroll Page (vertical) using only HTML and Javascript?

1 个答案: