How to hide vertical scrollbar in lwc lightning datatable. I have enabled lazy loading.
I tried with height, but when there are less records, vertical scrollbar is not coming.
But it didnt solve the issue of hiding it when there are more records.
Please suggest any solution for this. Because this is standard one, its getting hard to enhance.
<div style="overflow: scroll-hidden; height:300px">
<template if:true={loadedData}>
<c-sld-lightning-datatable scroll-hidden key-field="account" data={acclist} columns={columns}
enable-infinite-loading={isLoaded}
onloadmore={loadMoreData}
sorted-by={sortBy}
onchildexpand={childrowexpand}
onchildcollapse={childcollapse}
default-sort-direction={defaultSortDirection}
sorted-direction={sortDirection}
onsort={handleSortdata}
hide-checkbox-column="true"
onrowaction={moreRowAction}
>
</c-sld-lightning-datatable>
</template>
</div>
Best Answer
If you want to preserve the ability to scroll, but hide the scrollbars, you can do that with CSS. Keep in mind this is not a good idea for accessibility because a scrollbar is an affordance that lets users know they can scroll in the first place. See an example of this CSS in action on this W3Schools example. You should be able to find several more examples online if you search for "hide scrollbars css".
overflow-y
andoverflow-x
as well asoverflow
(for both x & y axes) tell the browser to allow scrolling to see overflowed content.scrollbar-width
and the prefixed attributes below for different browsers then allow you to hide the scroll bars.