javascript - 在高度低于 400px 的页面上，React-custom-scrollbar 不适用于鼠标单击（但适用于鼠标滚动）

问题描述

该网站是用 React 制作的。

问题出在 react-custom-scrollbar 上。在高度高于 400 像素的页面上，滚动条会响应鼠标单击。然而，在高度低于 400px 的页面上，鼠标单击后滚动条不起作用。在所有页面中，滚动条代码与上面相同：

const windowHeight = window.innerHeight;

 <Scrollbars
    autoHide
    renderTrackHorizontal={props => <div {...props} className="track-horizontal" style={{ display: 'none' }} />}
    renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" style={{ display: 'none' }} />}
    autoHeight
    autoHeightMin={windowHeight}
  >

</Scrollbars>

问题： 1. 我在滚动条代码中遗漏了什么，它不适用于高度小的页面？2.如何解决问题？

标签： javascriptreactjsscrollbar

问题出在zIndex上，它被设置为 main 。它导致滚动条低于步进顺序。

在这种情况下，有 2 个有效的解决方案：

如果已签名，请删除 main 中的 zIndex。或者
为滚动条设置 zIndex: 1001

javascript - 在高度低于 400px 的页面上，React-custom-scrollbar 不适用于鼠标单击（但适用于鼠标滚动）

问题描述

解决方案

推荐阅读