JSFiddle - React, Tailwind, and code Playground

HTML

<style>
.reel-shelf-items {
    padding: 12px 0;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
}
.rounded-reel-item {
    width:100px;
    height:100px;
    display:inline-block;
    border:1px solid red;
}
</style>
<div class="reel-shelf-items">
	<a href="..."><div class="rounded-reel-item">链接</div></a>
	<a href="..."><div class="rounded-reel-item">链接</div></a>
  <a href="..."><div class="rounded-reel-item">链接</div></a>
	<a href="..."><div class="rounded-reel-item">链接</div></a>
  <a href="..."><div class="rounded-reel-item">链接</div></a>
	<a href="..."><div class="rounded-reel-item">链接</div></a>
  <a href="..."><div class="rounded-reel-item">链接</div></a>
	<a href="..."><div class="rounded-reel-item">链接</div></a>
  <a href="..."><div class="rounded-reel-item">链接</div></a>
	<a href="..."><div class="rounded-reel-item">链接</div></a>
  <a href="..."><div class="rounded-reel-item">链接</div></a>
	<a href="..."><div class="rounded-reel-item">链接</div></a>
</div>

<script>
let mouseDown = false;
let startX, scrollLeft;
const slider = document.querySelector('.reel-shelf-items');

const startDragging = (e) => {
  mouseDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
}

const stopDragging = (e) => {
  mouseDown = false;

}

const move = (e) => {
  e.preventDefault();
  if(!mouseDown) { return; }
  const x = e.pageX - slider.offsetLeft;
  const scroll = x - startX;
  slider.scrollLeft = scrollLeft - scroll;
}

// Add the event listeners
slider.addEventListener('mousemove', move, false);
slider.addEventListener('mousedown', startDragging, false);
slider.addEventListener('mouseup', stopDragging, false);
slider.addEventListener('mouseleave', stopDragging, false);
</script>