← Wszystkie przykłady

JavaScript Produktywność producthunt.com

Product Hunt: nawigacja kanału klawiszami

Pozwala przeskakiwać między wpisami kanału klawiszami J i K, podświetlając aktualnie wybrany produkt.

Kod do skopiowania

// Navigate feed posts with the J and K keys
(function () {
  function posts() {
    return Array.from(document.querySelectorAll('[data-test^="post-item"]'));
  }
  let idx = -1;
  function go(step) {
    const list = posts();
    if (!list.length) { return; }
    idx = Math.max(0, Math.min(list.length - 1, idx + step));
    const el = list[idx];
    if (el) {
      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
      el.style.outline = '2px solid #da552f';
      setTimeout(function () { el.style.outline = ''; }, 800);
    }
  }
  document.addEventListener('keydown', function (e) {
    if (e.target && /^(INPUT|TEXTAREA)$/.test(e.target.tagName)) { return; }
    if (e.key === 'j') { go(1); }
    else if (e.key === 'k') { go(-1); }
  });
})();

Jak użyć tego przykładu

  1. Skopiuj kod przyciskiem powyżej.
  2. Zainstaluj JustZix (2 minuty) i otwórz wtyczkę na docelowej stronie.
  3. Dodaj nową regułę dopasowaną do tej strony.
  4. Wklej kod w panelu JavaScript reguły i zapisz — uruchomi się przy każdym wejściu na stronę.

Oceń ten przykład

Brak ocen — oceń jako pierwszy.

Czy ten przykład działa?

Snippety są bezużyteczne, jeśli nie masz gdzie ich wkleić.

JustZix instalujesz w 2 minuty i odpalasz swój kod na każdej pasującej stronie. Bez konta, bez opłat.

Pobierz za darmo Zobacz zastosowania