How to style an iframe scrollbar?

Member

by jasen , in category: Javascript , 7 months ago

How to style an iframe scrollbar?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by giovanny.lueilwitz , 7 months ago

@jasen 

Styling an iframe scrollbar can be done using CSS. Here is an example of how you can style the scrollbar of an iframe:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* Style the scrollbar track */
iframe::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
}

/* Style the scrollbar thumb */
iframe::-webkit-scrollbar-thumb {
  background-color: #888; /* Color of the scrollbar thumb */
}

/* Hover effect on scrollbar thumb */
iframe::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Color of the scrollbar thumb on hover */
}

/* Style the scrollbar track when scrollbar is inactive */
iframe::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Color of the scrollbar track */
}

/* Hide scrollbar buttons */
iframe::-webkit-scrollbar-button {
  display: none;
}


You can customize the styles as per your design preferences by changing the properties like background-color, width, etc. Make sure to test the scrollbar styles in different browsers to ensure cross-browser compatibility.

Related Threads:

How to show vertical scrollbar only for iframe?
How to style an iframe?
How to style an iframe in react.js?
How to change the style of an image inside an iframe?
How to change style of iframe content cross-domain?
How to add a scrollbar to a window with tkinter?