How to disable the second scrollbar on a modern sharepointpage with a list in it?

Copper Contributor

I have a Sharepoint online page where you can see a long list. My client did not like that on the right you can see 2 vertical scrollbars. I told them one is for the page and the other one is for the list. Is there a way to remove that from the list, so you should only be able to use 1 scrollbar to scroll through your list?

Sharepointnoob_0-1711535516430.png

 

7 Replies

@Sharepointnoob 

 

Are you using SharePoint default list web part on site page? Did you customize the list view using JSON formatting?

 

There is no way to change the "code" / functionality of SharePoint default list web part using out of the box capabilities.

 

However, you maybe able to customize list view using JSON formatting so that scroll bar will be removed from page. Check:

  1. Use view formatting to customize SharePoint 
  2. SharePoint JSON view formatting samples - you can find different view samples here which might help you to get started with

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

I have a SharePoint list with a custom formatted view created using JSON formatting. Is it possible to modify the JSON code to remove the vertical scrollbar from this view? I attempted to add the following code for this purpose, but it didn't work:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"additionalRowClass": "hide-vertical-scrollbar"
}

Could you provide guidance on how to achieve this?

@Sharepointnoob

 

Can you share current JSON used for list view formatting?


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Ofcourse, here it is:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"additionalRowClass": "hide-vertical-scrollbar",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"display": "flex",
"padding": "5px",
"margin-bottom": "5px",
"margin-right": "100px",
"width": "90%"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
},
"style": {
"display": "block",
"font-size": "18px",
"font-weight": "500",
"padding-bottom": "0px",
"padding-top": "0px",
"text-decoration": "none",
"text-overflow": "ellipsis",
"white-space": "normal"
},
"txtContent": "=[$Title]"
},
{
"elmType": "div",
"style": {
"font-size": "14px",
"white-space": "normal",
"overflow": "hidden",
"text-align": "left"
},
"txtContent": "=[$Description]"
}
]
}
]
}
}

@Sharepointnoob Can you try using this once?

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "padding": "5px",
      "margin-bottom": "5px",
      "margin-right": "100px",
      "width": "90%",
      "overflow": "hidden"
    },
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover"
            },
            "style": {
              "display": "block",
              "font-size": "18px",
              "font-weight": "500",
              "padding-bottom": "0px",
              "padding-top": "0px",
              "text-decoration": "none",
              "text-overflow": "ellipsis",
              "white-space": "normal"
            },
            "txtContent": "=[$Title]"
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "14px",
              "white-space": "normal",
              "overflow": "hidden",
              "text-align": "left"
            },
            "txtContent": "=[$Description]"
          }
        ]
      }
    ]
  }
}

 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Thank you for trying, but this is not removing the vertical scrollbar.
Do you know any other way to do this?