你最好把它移植到Stimulus，这样可以避免外部依赖，让你调整代码做你想做的事情。此外，Stimulus给了你一个非常强大的方法来改变键盘快捷键和初始加载行为，只需改变HTML属性。

刺激控制器

下面是jQuery代码到Stimulus的一个基本端口。

• 这并不能“缓解”滚动，但这应该不会太复杂，你可能已经在使用像https://animate.style/这样的动画库，可以只利用类来滚动。
• 我们有一个Stimulus类active，它允许你确定设置什么类名（或者一组类名，如果你使用Tailwind的话）。
• 我们还有一个活动目标，它由控制器代码设置，并允许Stimulus对自己的DOM元素的更改做出“React”。
• 最后，有两个值：index（跟踪什么索引是活动的状态，或者它可以用来在HTML中设置初始索引）和lines（一个CSS选择器，允许HTML在向上/向下移动时确定要关注的元素。
• 利用...valueChanged回调意味着我们可以考虑Controller如何对状态更改（索引更改）做出React。
• 当索引值更改时，它会清除/删除所有活动目标属性，然后允许设置新的索引值目标。
• 当一个控制器添加了这个新的目标时，我们可以利用目标连接/断开的回调来添加/删除active类。

import { Controller } from '@hotwired/stimulus';

/**
 * @see https://github.com/soxofaan/scrollocue/blob/master/js/scrollocue.js
 */
export default class extends Controller {
  static classes = ['active'];
  static targets = ['active'];
  static values = {
    index: { default: -1, type: Number },
    lines: { default: 'h1, p', type: String },
  };

  connect() {
    this.clear();
    if (this.indexValue < 0) this.indexValue = 0;
  }

  get lines() {
    return [...this.element.querySelectorAll(this.linesValue)];
  }

  clear() {
    [...this.activeTargets].forEach((element) => {
      element.removeAttribute(`data-${this.identifier}-target`);
    });
  }

  down({ params: { amount = 1 } = {} } = {}) {
    this.indexValue = Math.min(this.indexValue + amount, this.lines.length - 1);
  }

  up({ params: { amount = 1 } = {} } = {}) {
    this.indexValue = Math.max(0, this.indexValue - amount);
  }

  indexValueChanged(currentIndex) {
    this.clear();
    if (currentIndex === -1) return;
    const element = this.lines[currentIndex];
    element.setAttribute(`data-${this.identifier}-target`, 'active');
  }

  activeTargetConnected(element) {
    element.classList.add(...this.activeClasses);
    element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }

  activeTargetDisconnected(element) {
    element.classList.remove(...this.activeClasses);
  }
}

字符串

HTML

其余的“事件”监听器是由刺激动作属性设置的，在这里我们可以设置点击/向上/向下按下，上下移动项目。

<section
    id="container"
    data-controller="teleprompt"
    data-teleprompt-active-class="active"
    data-action="click->teleprompt#down keydown.space@document->teleprompt#down keydown.down@document->teleprompt#down keyup.up@document->teleprompt#up keydown.esc@document->teleprompt#clear"
>
  <div data-action="keydown.k@document->teleprompt#down keyup.j@document->teleprompt#up" data-teleprompt-amount-param="10"></div>
  <h1>Scrollocue</h1>

  <div class="section meta">
    <p>A simple autocue/teleprompter system.</p>
    <p>Just use the arrows or spacebar to scroll.</p>
    <p>Now, let's walk through some text.</p>
  </div>

  <!-- ... other content -->
</section>
<style>
  .active {
    outline: 3px solid green;
    outline-offset: -3px;
  }
</style>

型