UniFi スイッチ コンパクト テスト

 onlyDiffEl.addEventListener('change', renderTable); // ---- 矢印でスライド ---- function scrollByCards(dir){ const card = cardsEl.querySelector('.uicard'); const step = (card ? card.getBoundingClientRect().width : 260) + 14; cardsEl.scrollBy({ left: dir * step * 2, behavior: 'smooth' }); } prevBtn.addEventListener('click', () => scrollByCards(-1)); nextBtn.addEventListener('click', () => scrollByCards( 1)); function updateArrows(){ const maxScroll = cardsEl.scrollWidth - cardsEl.clientWidth; prevBtn.disabled = cardsEl.scrollLeft <= 2; nextBtn.disabled = cardsEl.scrollLeft >= maxScroll - 2; } cardsEl.addEventListener('scroll', () => requestAnimationFrame(updateArrows)); // ---- ドラッグで横スクロール（UI.com風） ---- let isDown = false, startX = 0, startLeft = 0; // クリック選択と干渉しないように：ドラッグ距離が大きいときだけスクロール扱いに let moved = 0; cardsEl.addEventListener('pointerdown', (e) => { isDown = true; moved = 0; cardsEl.classList.add('is-dragging'); cardsEl.setPointerCapture(e.pointerId); startX = e.clientX; startLeft = cardsEl.scrollLeft; }); cardsEl.addEventListener('pointermove', (e) => { if(!isDown) return; const dx = e.clientX - startX; moved = Math.max(moved, Math.abs(dx)); cardsEl.scrollLeft = startLeft - dx; }); function endDrag(){ isDown = false; cardsEl.classList.remove('is-dragging'); } cardsEl.addEventListener('pointerup', endDrag); cardsEl.addEventListener('pointercancel', endDrag); cardsEl.addEventListener('pointerleave', endDrag); rerender(); })();