hover 上使用 react-slick 的独立滚动时间选择器

Question

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

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

我的代码

任何人都可以帮助我吗？

Answer 1

2件事：

• 在您的听众中，您应该每次使用 boolean （ 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属性起作用，孩子的高度和宽度是强制性的。

我的答案基于这个线程