Javascript 如何将Pace.js附加到DOM中的自定义位置？

我正在使用Pace.js（）作为基本加载程序

它工作得很好，到目前为止没有任何问题。但是，我想做的是将Pace.js HTML附加到我选择的元素中

生成的HTML如下所示：

<div class="pace  pace-inactive">
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
        <div class="pace-progress-inner"></div>
    </div>
    <div class="pace-activity"></div>
</div>

---

默认情况下，Pace.js将其自身附加在开头的

标记之后。有什么方法可以连接到生成的HTML的位置吗？

好的，所以我找到了答案。它似乎没有记录在案

在插件选项对象中，有一个

target

键的值

默认选项如下所示：

defaultOptions = {
    catchupTime: 500,
    initialRate: .03,
    minTime: 500,
    ghostTime: 500,
    maxProgressPerFrame: 10,
    easeFactor: 1.25,
    startOnPageLoad: true,
    restartOnPushState: true,
    restartOnRequestAfter: 500,
    target: 'body',
    elements: {
      checkInterval: 100,
      selectors: ['body']
    },
    eventLag: {
      minSamples: 10,
      sampleCount: 3,
      lagThreshold: 3
    },
    ajax: {
      trackMethods: ['GET'],
      trackWebSockets: true,
      ignoreURLs: []
    }
  };

在我的项目中，我正在使用Browserify，下面是我如何实现这一点的：

var pace = require('../plugins/pace');
pace.options.target = '#main';
pace.start();

这将有效地覆盖Pace.js使用的默认选项中的

target

键

---

现在似乎很好用。希望这对其他人有所帮助。

打开pace的css文件，您可以通过更改 排名：7%！重要的

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 7% !important;
  right: 100%;
  width: 100%;
  height: 2px;
}

---

好吧，我想出来了。它似乎没有记录在案。 在插件选项对象中，有一个目标键的值

我知道这是一个老话题，但我想将Michael的答案扩展到我的答案之上，我通过设置更有效地使用了Pace.js：

pace.options.target = 'body:not(.pace-ignore)';

---

通过这种方式，我可以选择我不希望由pace监控的元素（如ads）。

因为大多数pace.js的CSS都使其位置固定，所以仅将其附加到特定元素上并没有多大帮助

这是让它填充元素的解决方案：

在您的index.html中：

<nav style="background-color: transparent; height: 5px; position: sticky; top: 0; z-index:10" id="pace-nav"></nav>
<script src="~/lib/PACE/pace.js" data-pace-options='{ "target": "#pace-nav" }'>

// main: ../main.less
@import (less) "../../../node_modules/pace-progress/themes/blue/pace-theme-minimal.css";

.pace .pace-progress {
  background: #2299dd;
  position: relative;
  z-index: 2000;
  right: 100%;
  width: 100%;
  height: 5px;
}