时间戳

首页 > 解决方案 > 在滚动条出现之前确定屏幕上可见的表格行数

javascript - 在滚动条出现之前确定屏幕上可见的表格行数

问题描述

背景：我正在处理一个仪表板，它在下面显示一个标题和一个表格。该表可以有很多行（超过 100 行）。

问题：大量行触发垂直滚动条显示，隐藏其余行。

可能的解决方案：我想旋转仪表板所在的每个屏幕上显示的表格行。我想避免设置在屏幕上可见的固定行数，而是确定在滚动条出现之前可以在屏幕上放置多少行。这意味着，首先，我想确定在滚动条出现之前屏幕上有多少行可见，然后创建一个轮播动画，其中显示接下来的 X 行，直到显示所有行并重置动画。

使用的技术： React JS、Bootstrap 表

对于轮播部分，我发现 Bootstrap Carousel 可以正常工作，但问题是要弄清楚屏幕上有多少行可见。如何确定在滚动条出现之前我可以在屏幕上显示多少行？非常感谢！

标签： javascripthtmlcssreactjstwitter-bootstrap

解决方案

一种可能的解决方案是：

  1. 在 DOM 中创建一个 100% 高度的元素（任何其他可能的高度也可以）。例如：

    <div id="row-wrapper" style="height: 100%"></div>

  2. 获取元素的高度。

    var availableHeight = document.getElementById('row-wrapper').clientHeight;

  3. 知道你的单行占据了多少高度，只需将 availableHeight 相除，你就会知道要渲染多少行。如果您的行高为 30：

var numberOfRows = Math.floor(availableHeight / 30);

推荐阅读