I'm trying to add custom scrollbar styling to a modal using CSS, but it is not working and the default scrollbar styling remains.
.modal::-webkit-scrollbar {
background-color: #fff;
width: 16px;
overflow: auto;
} /* SUB background of the scrollbar except button or resizer */
.modal::-webkit-scrollbar-track {
background-color: #fff;
} /* SUB scrollbar itself */
.modal::-webkit-scrollbar-thumb {
background-color: #babac0;
border-radius: 16px;
border: 4px solid #fff;
} /* SUB set button(top and bottom of the scrollbar) */
.modal::-webkit-scrollbar-button {
display: none;
}
I can see that the psuedo elements are being detected by the browser (see image yellow arrow) but for some reason they are not being applied to the modal (red arrow)
I can only think that this may be because the modal has elements from the shadow DOM (green arrow). I have very little experience of this. Is this likely to be the cause? Here is a code snippet of the x-modal component:
// js/common/overlay/modal.js
import { animate as animate5, timeline as timeline2 } from "vendor";
var Modal = class extends DialogElement {
connectedCallback() {
super.connectedCallback();
this.setAttribute("aria-modal", "true");
}
get shadowDomTemplate() {
return this.getAttribute("template") || "modal-default-template";
}
get shouldLock() {
return true;
}
get shouldAppendToBody() {
return true;
}
createEnterAnimationControls() {
if (matchesMediaQuery("sm")) {
return animate5(this, { opacity: [0, 1] }, { duration: 0.2 });
} else {
return timeline2([
[this.getShadowPartByName("overlay"), { opacity: [0, 1] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1] }],
[this.getShadowPartByName("content"), { transform: ["translateY(100%)", "translateY(0)"] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1], at: "<" }]
]);
}
}
createLeaveAnimationControls() {
if (matchesMediaQuery("sm")) {
return animate5(this, { opacity: [1, 0] }, { duration: 0.2 });
} else {
return timeline2([
[this.getShadowPartByName("overlay"), { opacity: [1, 0] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1] }],
[this.getShadowPartByName("content"), { transform: ["translateY(0)", "translateY(100%)"] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1], at: "<" }]
]);
}
}
};
if (!window.customElements.get("x-modal")) {
window.customElements.define("x-modal", Modal);
.modal {
--background: var(--modal-background);
--text-color: var(--modal-text);
--border-color: var(--modal-border-color);
--distance-to-bleed: var(--modal-body-padding-inline);
--modal-header-padding-block: .875rem;
--modal-header-padding-inline: 1.25rem;
--modal-body-padding-block: 1.25rem;
--modal-body-padding-inline: 1.25rem;
--modal-body-max-width: 30rem;
}
.modal::part(base) {
height: 100%;
width: 100%;
place-items: end center;
display: grid;
position: fixed;
inset: 0;
}
.modal::part(content) {
width: 100%;
max-width: var(--modal-body-max-width);
max-height: 75vh;
background: rgb(var(--background));
color: rgb(var(--text-color));
isolation: isolate;
overflow: auto;
}
@supports (height: 100dvh) {
.modal::part(content) {
max-height: 85dvh;
}
}
.modal::part(header) {
background: inherit;
border-block-end: 1px solid rgb(var(--border-color));
text-align: center;
z-index: 2;
align-items: center;
padding-block-start: var(--modal-header-padding-block);
padding-block-end: var(--modal-header-padding-block);
padding-inline-start: var(--modal-header-padding-inline);
padding-inline-end: var(--modal-header-padding-inline);
display: grid;
position: sticky;
inset-block-start: 0;
}
.modal::part(close-button) {
position: absolute;
inset-inline-end: var(--modal-header-padding-inline);
}
.modal::part(body) {
padding-block-start: var(--modal-body-padding-block);
padding-block-end: var(--modal-body-padding-block);
padding-inline-start: var(--modal-body-padding-inline);
padding-inline-end: var(--modal-body-padding-inline);
}
<x-modal id="modal-b02ffcb2-0131-4857-bb08-3e85373d0853" class="modal modal--lg" role="dialog" aria-modal="true" open style="display: block; opacity: 1;">
#shadow-root (open)
<div part="base">
<div part="overlay" style="opacity: 1;"></div>
<div part="content" style="transform: translateY(0px);">
<header part="header">
<slot name="header"></slot>
<button type="button" is="dialog-close-button" part="close-button tap-area" aria-label="Close">close</button>
</header>
<div part="body">
<slot></slot>
</div>
</div>
</div>
<span class="h5" slot="header">title</span>
<div class="prose"><p>hello world</p></div>
</x-modal>
Is there a way to apply css to this modal in order to add the custom scrollbar?
Thanks in advance for any help/reply.
It is a known Chromium bug:
Here is the Chromium Bug report:
https://bugs.chromium.org/p/chromium/issues/detail?id=1302852
Alas, from the activity, we can kinda assume there is no priority to fix it.