Issue
To preface, I am very new to coding altogether! It's simply a side hobby that I am learning to do alone.
I'm intending to use an image as a scrollbar, but I want the image to be larger than the scrollbar width allows for. Is it feasible to do so?
.scroll {
width: 200px;
height: 100px;
text-align: center;
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll;
color:#542323;
}
.scroll {
overflow-y: scroll;
overflow-x: auto;
}
.scroll::-webkit-scrollbar {
background: none;
}
.scroll::-webkit-scrollbar-thumb {
background: url('https://drive.google.com/uc?export=view&id=16zywqQCwQ_ouIn-zBScMb-z50_k91oDq') no-repeat;
background-size: 50%;
}
/* to add scrollability - added by Editor */
body {
min-height: 1000vh;
}
This works alright, but the image is very tiny and increasing the background size ends up with the photo being cut off.
Solution
Yes, you need to write css for that. Preferable at the top of CSS file.
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
You can add as much as you want. If you want to change colour then,
::-webkit-scrollbar-track {
background-color: grey;
}
Answered By - Bhavy Ladani
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.