使用 react-slick 在悬停时独立滚动时间选择器

Question

我正在使用 react-slick 库构建一个时间选择器，如下所示：

客户要求我能够使用鼠标滚轮滚动时间。我设法实现了它，但是当我使用鼠标滚动时，所有选择器都会同时滚动。这个想法是让每次选择器在悬停在它们上面时独立滚动。这是我目前所拥有的：

My code

有人可以帮我吗？

Answer 1

2 件事：

在你的监听器中，你应该每次都使用一个布尔值 (if (e.target.closest('.slider1'))
如果您需要滚动滑块，您应该使用 swiper，它是内置的。(https://swiperjs.com/react/)

Answer 2

以下是允许滚动和隐藏滚动条的方法：

<div
  style={{
    overflow: 'hidden'
  }}
>
  <div
    style={{
      height: '159px',
      width: '100px',
      overflow: 'auto',
      boxSizing: 'content-box',
      paddingRight: '17px',
    }}
  >
    <Slider
      {...settings}
      className='slider-entity hours'
      ref={(slider) => (this.slider1 = slider)}
    >
      <div>12</div>
      <div>13</div>
      <div>14</div>
      <div>15</div>
      <div>16</div>
    </Slider>
  </div>
</div>

为了简单起见，我直接添加了样式。

为了 box-sizing 属性的工作，child 的高度和宽度是强制性的。

我的回答基于 this thread

使用 react-slick 在悬停时独立滚动时间选择器

Independent scroll time-picker on hover using react-slick

javascript

css

reactjs

slick.js

react-slick