I have a Document Library web part on my modern page in which I'd only like the users to see 4 of the 7 columns. I would normally hide the extra three columns, but due to a JSON script, they have to be visible. So my thinking is that If I can remove the horizontal scroll bar, the users won't know those extra 3 columns are there.

Is there a way to remove the horizonal scroll bar on a Modern Document Library Web Part? I have a Modern Script Editor Web Part I could use if this task is doable.

1 Answer 1


Try adding below CSS on your page:

    div[data-automation-id^='detailsListContainer']:hover {
        overflow-x: hidden !important;

Note: DOM manipulation & CSS customizations are not recommended by Microsoft and some of your customization may break if Microsoft changes HTML element id/classes in new release updates.

  • Thank you for your reply. This worked perfectly to remove the horizontal scroll bar, but I do still need the vertical scroll bar visible. Is it possible to only remove the horizontal scroll bar?
    – Chris
    May 27, 2021 at 13:11
  • Change overflow to overflow-x. Check updated answer. May 27, 2021 at 13:41
  • 1
    Perfect. Thanks!!
    – Chris
    May 27, 2021 at 13:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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