Question

我正在尝试将WebGL脚本添加到具有FullPage.js的网站，但它不能很好地工作（我只是得到一个黑屏）。我不知道问题是什么，因为WebGL脚本和Fullpage.js分别完善。我无法将所有脚本添加到jsFiddle，但可以在此站点http://www.scandinavija.com/index.html看到脚本（我删除了所有不相关的脚本）。

当我在Chrome中检查网站时，我收到以下错误：“未捕获的TypeError：无法在particle.js读取属性'offsetWidth'为null：6”可能是问题吗？

然而，我的直觉告诉我问题应该在某处：

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
    <link rel="stylesheet" type="text/css" href="css/examples.css">

    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/scrolloverflow.js"></script>
    <script type="text/javascript" src="js/jquery.fullPage.js"></script>

    <!-- Particles (three.js) -->
    <script type="text/javascript" src="js/detector.js"></script>
    <script type="text/javascript" src="js/stats.min.js"></script>
    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript" src="js/particles.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                verticalCentered: true,
                anchors: ['firstSection', 'secondSection', '3rdSection',     
                '4thSection', '5thSection'],
            });
        });
    </script>
</head>
<body>

<!-- My canvas (three.js) below -->

<div id="canvas-container"></div>

    <div id="fullpage">
        <div class="section" id="section1"></div>
        <div class="section" id="section2"></div>
        <div class="section" id="section3"></div>
        <div class="section" id="section4"></div>
        <div class="section" id="section5"></div>
    </div>
</body>
</html>

CSS：

@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
    background-color: #000;
}
a{
    text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
    font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
   content:'';
}
abbr,acronym { border: 0;
}

/* START OF MY SCRIPT BELOW*/

#canvas-container {
    z-index: 1000;
    position: absolute;
    width: 100%;
    height: 100%;
}

Answer 1

您收到此错误是因为您尝试访问被评估为null的对象的属性。

particles.js

<li>

这是因为执行脚本var container = document.getElementById('canvas-container'); // ^^^^^^^^^^^^^^^^ // not found var w = container.offsetWidth; // ^^^^^^^^^ // eq. null时，DOM中的元素#canvas-container不存在。

您只需将代码包装在文档加载的回调中，以确保该元素可以访问：

particles.js

您也可以简单地在HTML文件的末尾移动脚本标记：

$(function() {
  // particles.js code
});

将画布添加到fullpage.js

1 个答案: