1

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>
2
  • You want to hide the scrollbar, but still allow scrolling, or do you want to size the the table so that there isn't any overflow to scroll to? – nbrown Oct 6 '20 at 14:10
  • Yes, I want to hide scrollbar, but still allow scrolling. – Jairam Oct 6 '20 at 18:58
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 */
}
1
  • Thank you for reply @nbrown Unable to hide the vertical scrollbar with general css.... cause of standard lightning datatable But used this.. It worked for me ::-webkit-scrollbar { width: 0.5em; } – Jairam Oct 7 '20 at 16:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.