首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >React Virtualized List with AutoSizer -不显示垂直滚动条

React Virtualized List with AutoSizer -不显示垂直滚动条
EN

Stack Overflow用户
提问于 2018-10-11 10:23:56
回答 2查看 3.2K关注 0票数 1

我正在尝试和AutoSizer一起使用React Virtualized List。这就是我的问题:我将列表的高度设置为200px,然后我在Chrome检查器中看到高度是200,这是可以的,但是溢出的内容是可见的,即使我看到ReatVirtualized_Grid_innerScrollContainer的css样式是overflow: hidden。这个问题导致没有垂直滚动条,并且显示了很大一部分数据,但不是全部。所以它显示了比我坐的指定高度多得多的数据。为什么会这样呢?

这是我的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Row from './Row';
...
render () {
  return (
    <AutoSizer disableHeight>
     {({ width })} => (
       <List
          height={200}
          width={width}
          rowCount={this.props.list.size}
          rowRenderer={this.rowRenderer}
          rowHeight={24}
        />
      )}
    </AutoSizer>
  );
}
rowRenderer = ({ key, style, index, parent }) => {
  const row = this.props.list.get(index);
  return (
    <Row
      row={row}
      style={style}
      rowIndex={index}
      parent={parent}
      columnIndex={0}
    />
  );
}
EN

回答 2

Stack Overflow用户

发布于 2018-10-11 12:40:01

问题是,在项目中的某个地方,这两个溢出被覆盖了:

  • ReactVirtualized__Grid__innerScrollContainer
  • and the ReactVirtualized__Grid__innerScrollContainer inside it

因此,解决方案是将覆盖溢出的CSS的范围限定为仅需要它的目标位置,而不是全局添加它,这样它将影响所有的React Virtualized List组件。

票数 0
EN

Stack Overflow用户

发布于 2019-07-22 06:20:15

我必须取消设置CSS属性will-change,以使用react-virtualized获得要显示的滚动条

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.ReactVirtualized__Grid.ReactVirtualized__List {
  will-change: unset !important;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52757755

复制
相关文章
2021 年你应该尝试的 8 个 React 库
代表了一种开发功能强大的 react.js 组件的全新方式,这些组件在完全可定制的同时开箱即用。
青梅煮码
2023/02/18
1.6K0
第48天:垂直滚动条
垂直滚动条 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box { 8 width: 300px; 9 height: 500px; 10 border: 1px solid red; 11
半指温柔乐
2018/09/11
6410
第48天:垂直滚动条
了解虚拟列表背后原理,轻松实现虚拟列表
为了理解插件背后的原理机制,我们实现一个自己简易版的虚拟列表,希望在实际业务项目中能带来一些思考和帮助。
Maic
2022/07/28
3.6K0
了解虚拟列表背后原理,轻松实现虚拟列表
MFC 控件编程之水平滚动条跟垂直滚动条
  首先在操作滚动条的时候.我们要知道滚动条的一些属性. 比如我们要设置 最大值 最小值. 以及每次递增的值是多少.都要设置.
IBinary
2019/05/25
2.8K0
React List Diff
对treeA做以上3步,就能得到treeA',树的规模较小时,一眼就能看出来,回想下是怎么做到的:
ayqy贾杰
2019/06/12
7130
PyQt5 技术篇-scrollArea不显示滚动条解决方法。Qt Designer不显示滚动条。滚动条的显示和隐藏。
首先给大家展示一下,必显示滚动条的方法。 PyQt5设置方法: self.scrollArea.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOn)
小蓝枣
2020/09/24
4.6K0
PyQt5 技术篇-scrollArea不显示滚动条解决方法。Qt Designer不显示滚动条。滚动条的显示和隐藏。
ios下滚动条默认显示
该文讲述了如何实现ios下滚动条默认显示,以及需要注意的样式和兼容性问题,并提供了一个demo示例。
练小习
2017/12/29
5.5K0
ios下滚动条默认显示
React组件总结——难道还没有你喜欢的组件吗?
UI组件 Table / Grid reactable ag-grid react-datagrid griddle-react react-data-grid react-data-components react-bootstrap-table reactabular react-pivot fixed-data-table autoresponsive-react sematable 滚动加载 react-lazyload react-infinity react-infinite react-inf
Javanx
2019/09/04
1.8K0
css如何隐藏垂直滚动条但同时需保持滚动
在写前端页面时,对于超出的内容,我们希望隐藏,同时保持垂直的滚动,但是又不希望有丑陋的垂直滚动条,那该怎么去实现呢
itclanCoder
2023/02/26
2.2K0
css如何隐藏垂直滚动条但同时需保持滚动
html div 隐藏滚动条样式,div滚动条样式隐藏与显示
DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢?
全栈程序员站长
2022/09/14
8.9K0
用 React 分页显示数据用react分页显示数据
展示一下主要三个组件:父组件listBox、列表组件List、按钮组件PageButton
一个会写诗的程序员
2018/08/17
3K0
用 React 分页显示数据用react分页显示数据
WPF 解决 ListView 的滚动条不显示
本文告诉大家如何解决一个诡异的问题,如果有一个 ListView 同时里面的元素的高度很长,但是滚动条就是不显示,怎么让这个滚动条显示
林德熙
2019/03/13
4.2K0
虚拟滚动之原理及其封装
前端的业务开发中会遇到一些不分页且数据条数超过1000加载的列表(长列表),不分页的需求在一般前端程序员看来是不可思议的。正常的思考逻辑是,当数据量20w+时,后端报文可去到30+M,查询时间可能去到几十秒。但是前端如果尝试渲染这些数据,花费的时间必定是以分钟计算。通常是3分钟以上。相比之下,由前端优化这个问题更为迫切,责任更为突出(锅更大)。
一粒小麦
2020/07/10
10K1
虚拟滚动之原理及其封装
(六十九)c#Winform自定义控件-垂直滚动条
GitHub:https://github.com/kwwwvagaa/NetWinformControl
冰封一夏
2019/09/29
1.8K0
(六十九)c#Winform自定义控件-垂直滚动条
VantUI实现list列表分页显示
<template> <div class="box"> <van-list v-model="loading" :finished="finished" :offset="offset" loading-text="正在拼命加载中..." finished-text="暂无更多内容了" @load="getrecord" > <div class="row"></div> </van-list>
明知山
2020/09/03
2.3K0
HTML5-JS操作页面滚动条(禁止、隐藏、显示、不显示)
不显示滚动条(css) ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条(js) document.body.parentNode.style.overflowY = "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条(js) document.body.parentNode.style.overflowY = "auto"; $("body").parent().css("overflo
手撕代码八百里
2020/07/28
11K0
list和array 访问不连续index
python中内置数据类型list与numpy array都是常会用到的两种数据结构。 二者在访问变量中不连续index时处理方式有所不同。
chaibubble
2021/12/07
3430
vscode 使水平滚动条固定持续显示
1、在编辑器窗口中键盘 ctrl/command + shift + p 2、输入 setting,打开设置(json) 3、在 JSON 文件中加入以下代码:
Leophen
2022/05/07
2.4K0
duilib的Combo控件滚动条不显示的问题
duilib的Combo控件的下拉框是一个独立的子窗口,类名:CComboWnd。 从duilib的源码可以知道,CComboUI控件在Add到布局上的时候,自己的m_pManager还是当前所在窗口的管理器指针,这样默认的滚动条样式图片等都在其中。 但是下拉框子窗体CComboWnd却有自己的一个CPaintManagerUI对象m_pm,而这个m_pm却没有从m_pManager中拿到滚动条的样式等资源(好像字体也是,好在字体可以直接指定全局共享),这样就出现了滚动条不显示的问题。实际应该是显示了只是因
大菊观
2018/05/24
2K0
LabVIEW显示控件中内容过长设置自动滚动条
本篇博文分享程序设计时一个细节小技巧,在LabVIEW显示控件中内容过长设置自动滚动条。
不脱发的程序猿
2022/04/13
2.6K0
LabVIEW显示控件中内容过长设置自动滚动条

相似问题

React-Virtualized Autosizer为VirtualScroll计算高度为0

05

如何在react-virtualized autosizer中包装material-ui ListItem

10

使用React-Virtualized AutoSizer时,未在测试中渲染子对象

20

React-Virtualized List滚动时跳过行

12

React virtualized List scrollTo by id或其他属性

112
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文