reactjs 如何停止滚动而不隐藏滚动条

x7rlezfr 于 2022-11-29 发布在 React

关注(0)|答案(2)|浏览(535)

这里我面临一些问题在滚动
我已经通过滚动的鼓形设计制作了一个自定义选择值（您可以在实时代码中看到）问题
1.通过滚动选择子组件中的值时父div滚动

我尝试的****方法-1

我已经尝试了一些css的方法，如{overflow-y：scroll，position fixed}但是没有用，因为我认为我已经根据代码需要使用了onWheel事件而不是onScroll

方法-2

我在mouseover和mouseout事件中尝试了此方法
下面是每个模块中的功能

鼠标移过

const mouseHoverHandle = () => {
    var parentScrollableDiv = document.querySelector(".container");
    parentScrollableDiv.classList.add("containerScrollFiller");
  };

这里，当鼠标悬停在组件上时，我只添加一个类来禁用滚动条，并使用Css ::after类在滚动条的位置添加一个填充符
这是css文件中的containerScrollFiller类属性

.containerScrollFiller{
    overflow-y: hidden ;
}
.containerScrollFiller::after{
position: absolute;
top: 0;
right: 0;
background-color: lightgray;
width: .5rem;
height: 100%;
content: "";
border-radius: .6rem;
}

下面是mouseOut块

鼠标移出

const mouseOutHandle = () => {
    var parentScrollableDiv = document.querySelector(".container");
    parentScrollableDiv.classList.remove("containerScrollFiller");
  };

这里我只是从类列表中删除类
此方法部分工作，但当mouseOut和mouseOver组件连续运行时，UI会抖动。这看起来有点奇怪（您可以在下面的实时代码中看到此问题）

如何在不隐藏或删除滚动条的情况下停止滚动

第一个
任何帮助都是如此的感激

感谢您的支持！！

reactjs

来源：https://stackoverflow.com/questions/74599128/how-to-stop-scrolling-without-hiding-the-scroll-bar

2条答案

按热度按时间

7kjnsjlb1#

由于我不太擅长React，所以我将您的示例简化为一个简单的HTML / CSS / JS示例。
但它基本上还是一样的，因为你想保持外部容器从滚动，只要你输入你的日期选择。
因此，基本上，你需要两个事件在你的日期选择。正如你已经提到在你的帖子，一个当你进入元素和一个当你退出它。
mouseenter日期选择：当这个事件触发时，你不想阻止你的外部容器滚动。为了做到这一点，你向外部容器添加一个新的eventListener，监听wheel事件。
在event函数中，使用e.preventdefault()阻止默认行为，并使用e.stopPropagation停止向上冒泡事件。
mouseout日期选择：当你退出date select时，你想从滚动容器中删除之前添加的eventListener。你可以使用removeEventListener()来完成这个操作。这样你就可以在不再悬停该元素时再次滚动。
注意：为了删除一个eventlistener，你必须为你的事件使用命名函数。因此我们用function preventScroll()定义它
注2：只要您不移动鼠标，只是滚动，就不会触发mouseenter事件，因此您可以在元素上继续滚动，而不会停留在它上面
注3：如果你想让移动的用户也有同样的行为，你可能需要额外的事件监听器，例如，在他们开始使用日期选择时。你必须分别定义它们，但基本概念是相同的。
以下是最小的工作示例，同样的示例也可应用于响应应用程序
第一个