防止react-virtualised表格无限滚动鼠标滚轮事件滚动整个页面
的方法是通过监听鼠标滚轮事件，并判断滚动事件发生在表格区域内还是页面其他区域内。如果滚动事件发生在表格区域内，则阻止事件冒泡，使其不会影响整个页面的滚动。
具体实现步骤如下：
- 首先，需要在react-virtualised表格组件的外层容器上添加一个滚动事件监听器。
<div onWheel={handleScroll}>
{/* react-virtualised表格组件 */}
</div>- 在事件处理函数
handleScroll中，判断滚动事件发生的位置是否在表格区域内。
const handleScroll = (event) => {
const tableContainer = document.getElementById('table-container');
const isScrollingInsideTable = tableContainer.contains(event.target);
if (isScrollingInsideTable) {
event.stopPropagation(); // 阻止事件冒泡
}
};- 在react-virtualised表格组件的外层容器上添加一个唯一的
id属性，以便在事件处理函数中获取该容器。
<div id="table-container" onWheel={handleScroll}>
{/* react-virtualised表格组件 */}
</div>这样，当鼠标滚轮事件发生在表格区域内时，事件将被阻止冒泡，不会影响整个页面的滚动。
推荐的腾讯云相关产品：无
请注意，以上答案仅供参考，具体实现方式可能因具体项目需求而有所不同。
相关·内容
在大的内容页面中使用react-virtualised table和infinite scroll时，如果用户滚动到表格的底部，而下一组数据尚未完成加载，鼠标滚轮事件就会上升到窗口，并且窗口会继续滚动通过表格有没有办法截获鼠标滚轮事件来调用preventDefault？这可以检查用户是否在表的底部，以及是否要防止冒泡。onScroll属性提供了一些信息，但没有提供
浏览 19提问于2017-12-20得票数 0
在使用鼠标滚轮滚动页面时，如何防止滚动可滚动元素(例如，文本区域、带有滚动条的div )？
当我使用鼠标滚轮从上到下垂直滚动页面时，我想忽略鼠标光标下恰好出现的可滚动元素。我仍然希望在不滚动页面时滚动“可滚动元素”，而只是将鼠标悬停在元素上并使用滚轮
浏览 6提问于2014-08-22得票数 1
我需要使一个网页滚动只能通过滚动条。我试图找到如何捕捉滚动条事件，但我认为这是不可能的。false); window.onmousewheel = document.onmousewheel = wheel;但在我的情况下，它们不是很有用，因为它们会阻止所有的滚动事件
浏览 2提问于2013-11-17得票数 18
我正在尝试防止由页面元素捕获的鼠标滚轮事件导致滚动。我原以为false作为最后一个参数会得到预期的结果，但是在这个"canvas“元素上使用鼠标滚轮仍然会导致滚动： mouseController.wheel(event);在这个"canvas“
浏览 1提问于2012-04-25得票数 31
回答已采纳
我正在使用创建自定义滚动条样式。jScrollPane适用于所有现代浏览器，但滚动功能仅适用于Webkit浏览器(Safari和Chrome)。尽管在中，鼠标滚动在所有浏览器中都具有完整的功能。
也许这与我的列使用绝对位置有关？
浏览 1提问于2012-01-17得票数 0
回答已采纳
4回答
删除鼠标滚轮滚动
、、、
我有一个带有height和overflow-x: hidden的div，这样我就可以看到垂直滚动条了。现在，当我用鼠标滚轮滚动整个页面时，如果我的光标移动到div的顶部，它就会开始滚动div而不是页面。有没有可能在这个特定的div上移除鼠标滚动？
浏览 4提问于2013-03-03得票数 2
回答已采纳
如何仅在聚焦时滚动div，而不是整个页面。 我有一个小部件，它有一个overflow-y: auto，当它被展开时，会出现一个滚动条，但问题是它在使用鼠标滚轮时不会滚动。使用鼠标滚轮，整个页面将只滚动 我希望当小部件被聚焦时，使用鼠标滚轮滚动应该可以工作 Div Sroll this
浏览 18提问于2020-11-08得票数 0
4回答
下面是我需要帮助的应用程序：
顶部的整个框是一个Flex应用程序。左边有弹球机列表的框是一个VBox。正如你所看到的，如果你试图用鼠标滚轮滚动，它不会响应。关闭它的原因是因为我发现如果它打开了，当你向上/向下滚动时，整个页面都会跟着它。因此，如果你向下滚动四五次，应用程序就看不见了。当我去年编写这个程序时，我试图找到一个解决方案，但没有找到任何答案。有没有人知道有没有办法让Flex抓住鼠标滚轮的焦点而不让浏
浏览 2提问于2009-08-07得票数 1
回答已采纳
1回答
为了防止在元素顶部/底部使用自己的滚动条时使用鼠标滚轮滚动整个页面，我使用的是Brandon Aaron的。
只要我滚动得不太快，它就能正常工作。看起来当滚动非常快的时候，有两个事件会通过“我还没有到达顶部/底部”的检查，并且都会被执行。但是，其中一个将滚动元素到顶部/底部，下一个将滚动整个页面，这是我试图阻止的。s
浏览 1提问于2013-05-22得票数 1
回答已采纳
我试图在任何滚动事件中滚动一个页面，但是，当我们在中使用鼠标滚轮时，会触发多个滚动事件。当鼠标或键盘用于滚动时，我想一次滚动一个屏幕，但鼠标滚轮滚动多次触发下面的事件 e.preventDefault();}
浏览 3提问于2015-11-22得票数 1
1回答
由于某些原因，当鼠标位于任何子级上时，我的滚动查看器不会处理鼠标滚轮事件(或者至少在鼠标滚轮时滚动)。我希望它是这样的，当鼠标滚轮在整个滚动查看器区域上时，鼠标滚轮滚动。或者当你点击滚动条中包含的东西时，无论鼠标在哪里，它都会处理鼠标滚轮，因为它有焦点。有什
浏览 3提问于2010-07-07得票数 2
回答已采纳
我使用SWFWheel来获取actionscript3中的鼠标滚轮事件，并且在需要滚动条的完整html页面中有一个小的flash窗口。flash可以正常滚动，但整个HTML页面也会随之滚动。如何在flash上禁用滚动到html的功能？
浏览 0提问于2011-06-23得票数 2
回答已采纳
4回答
在我的页面上，我有一个iframe，它包含一些带有滚动条的div：我如何阻止鼠标轮滚动的iframe及其内容？我想要实现的是，即使光标在iframe上，鼠标滚轮滚动始终会滚动父页面。我做了一个更真实的例子：为了确保:我不想禁用IF
浏览 5提问于2015-12-09得票数 4
1回答
我有一个带有画布的网页，它被用来用三个is渲染3D场景，但是画布不是全屏，所以它有滚动条，因为它有一些HTML内容。如何防止鼠标滚轮滚动页面，只处理画布内的鼠标轮？我已经在画布的“轮子”事件中添加了preventDefault和stopPropagation，但是仍然是页面滚动。
浏览 5提问于2022-11-12得票数 0
假设我的页面上有一个弹出式窗口，带有一个y滚动条，如截图所示：通常，如果我将鼠标悬停在列表上，我可以使用鼠标滚轮向上或向下滚动。当我到达列表的底部时，鼠标滚轮会使整个页面向下滚动。有没有一种方法可以允许在弹出窗口中滚动，但当指针位于弹出窗口顶部时，阻止页面滚动？
浏览 0提问于2013-11-22得票数 0
1回答
在in中禁用鼠标滚轮
、、、
我正在尝试禁用滚轮缩放，这样我就可以用鼠标滚轮上下滚动网页。我可以使用以下命令禁用鼠标滚轮缩放：然而，这并不能让我恢复正常的页面滚动滚动事件似乎被to捕获，而不是传播。
如何让is忽略鼠标滚轮或将其传播到浏览器，以便即使光标位于地图顶部，用
浏览 0提问于2016-12-05得票数 2
它处理来自鼠标轮的事件，并缩放图像，包含在“覆盖”中。
问题是，鼠标轮事件也会导致整个浏览器窗口的滚动。我希望鼠标滚轮事件只去“覆盖”。这部分工作:它防止窗口滚动，然后用户正在缩放“覆盖”。但是，当用户完成(并且window.onWheel被恢复)时，主浏览器窗口将不再使用鼠标轮滚动。
浏览 2提问于2017-08-22得票数 2
回答已采纳
4回答
我在一个页面中有一个垂直滚动的div，它也是垂直滚动的。我想可能会有一个利用event.stopPropagation()
浏览 3提问于2012-02-13得票数 16
回答已采纳
1回答
我有一个内部可滚动DIV的页面。当我将鼠标悬停在DIV上，并尝试使用鼠标滚轮滚动它时，DIV的内容可以按需滚动，而主页保持不变。但是当我到达DIV滚动区域的底部时，整个页面开始滚动。我曾尝试在该div上设置事件处理程序，但preventDefault()方法也会阻止滚动该DIV本身。mousewheel', function(ev){
ev.st
浏览 2提问于2012-04-02得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
