I am currently working on a CustomPopup functional component that includes a reactjs-popup:
function CustomPopup({setFalse, item}){return(<Popup open={true} onClose={() => {setFalse(false)}} modal closeOnDocumentClick nested>
{item === "howto" ?
(close => (
<div className="modal">
<button className="close" onClick={close}>
×
</button>
<div className="header"> HowTo </div>
<div className="content">
{'howto'}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
delectus doloremque, explicabo tempore dicta adipisci fugit amet dignissimos?
<br />...
https://i.stack.imgur.com/nL1T8.png
I have been trying to change the style of the scrollbar within the popup, but so far, none of the methods I attempted have worked.
My attempts included:
...applying styles inside the modal and modal-content classes:
.modal > .content {
width: 100%;
padding: 10px 5px;
height: 750px;
overflow-y: scroll;
scrollbar-color: #6969dd}
...using a universal selector:
*{
scrollbar-color: #6969dd #e0e0e0;
scrollbar-base-color: #6969dd;
scrollbar-face-color: #6969dd;
scrollbar-track-color: #6969dd;
scrollbar-gutter: #6969dd;
}
...attempting with webkit properties:
.modal::-webkit-scrollbar {
width: 12px; /* width of the entire scrollbar */
}
.modal::-webkit-scrollbar-track {
background: orange; /* color of the tracking area */
}
.modal::-webkit-scrollbar-thumb {
background-color: blue; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
I have tested these in both Edge and Chrome browsers without success. Any new suggestions would be greatly appreciated.