Hide vertical scrollbar in lwc lightning datatable

Question

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>

Answer 1

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 and overflow-x as well as overflow (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.

.myclass {
    overflow-y: scroll; /* Tells the browser to treat `overflow` content as scrollable */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.myclass::-webkit-scrollbar {
     display: none; /* WebKit browsers, like Chrome and Safari */
}