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

如何解决使用react-slick悬停时独立的滚动时间选择器

我正在使用react-slick库为旋转木马构建时间选择器，如下所示：

客户要求我熟悉使用鼠标滚轮的滚动时间。我设法实现了它，但是当我使用鼠标滚动时，所有选择器都会立即滚动。想法是，每次将选择器悬停在其上时，都具有独立的滚动。这是我到目前为止的内容：

My code

有人可以帮助我吗？

解决方法

2件事：

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

,

您可以执行以下操作来允许滚动并隐藏滚动条：

<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属性才能正常工作。

我的答案基于this thread