在LWC开发中，按下某个按钮，然后根据某些条件生成检索结果一览画面，可能是最常见的自定义需求之一了。

对于这种需求，LWC给我们提供了一个标准控件，那就是lightning-datatable，它拥有能够展示不同的数据类型，支持行内编辑，自由调整列宽等等便捷的功能。

那么当客户希望不仅仅通过实现分页功能(SOQL limit&offset)来展示更多数据时，如何实现在当前页表格纵向滚动，来展示尽量多的数据呢。

当我们上网寻找答案时,他们会告诉我们，只需要用一个固定高度的外框来将你的table包起来就好了，当你的table高度超过div高度时，纵向的滚动条(ScrollBar)就会自动出现。例如：

<template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}>
        </lightning-datatable>
    </div>
</template>

我想说这个并不完美，因为表头或者说列名那一行，也会随着滚动消失在上方，而作为LWC标准控件的lightning-datatable并不能够轻易的使用position:fixed这种 CSS 属性来进行表头固定，而且这样也会影响表格的横向滚动。

lightning-datatable提供了标准的做法，只是网上资料比较少，那就是使用onscroll={handleScroll}。

下面是具体的例子：

<template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}
                onscroll={handleScroll}>
        </lightning-datatable>
    </div>
</template>

import { LightningElement } from 'lwc';

const columns = [
    { label: 'Label', fieldName: 'name' },
    { label: 'Website', fieldName: 'website', type: 'url' },
    { label: 'Phone', fieldName: 'phone', type: 'phone' },
    { label: 'Balance', fieldName: 'amount', type: 'currency' },
    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' },
];

export default class BasicDatatable extends LightningElement {
    data = [{'name': 'test1', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test2', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test3', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test4', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test5', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test6', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test7', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test8', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test9', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test10', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test11', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test12', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test13', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test14', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test15', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test16', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test17', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test18', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test19', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'},
            {'name': 'test20', 'website':'https://developer.salesforce.com/', 'phone':'987654321', 'amount':'10', 'closeAt': '2023-08-13T11:22:33.000Z'}];

    columns = columns;

    connectedCallback() {
    }

    handleScroll(event) {
        const dataTable = this.template.querySelector('lightning-datatable');
        const containerHeight = dataTable.clientHeight;
        const contentHeight = dataTable.scrollHeight;
        const scrollPosition = event.target.scrollTop;
        console.log(handleScroll);
        console.log(dataTable);
    }
}
    

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>