0
272
VistasIs it possible to align child items based on parents border-radius
I am creating a custom scrollbar with absolute positioned divs at the right(for vertical) and bottom(for horizontal).
When there is a border radius on parent, both scrollbars edge gets hidden.
Is there a way we can align the child elements based on border-radius of parent? Like this:
Below is my html:
<div class=“content-container”>
<div class=“content”>SOME OVERFLOW CONTENT</div>
<div class=“scrollbar-y”>
<div class=“scrollbar-track”>
<div class=“scrollbar-thumb”></div>
</div>
</div>
</div>
Below is my css:
.content-container {
position: relative;
height: 400px;
width: 600px;
}
.content {
height: 100%;
width: 100%;
overflow: auto;
}
.scrollbar-y {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.scrollbar-track {
width: 16px;
height: 100%;
border: 4px;
background: transparent;
position: relative;
}
.scrollbar-thumb {
top: 0; // calculated based on scroll event
width: 8px;
background: grey;
height: 42px; // calculated based on clientHeight and scrollHeight
}
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Here. You have to set height of "scrollbar-button".
.container {
overflow-y: auto;
max-height: 170px;
border: 1px solid #b9b9b9;
border-radius: 20px;
padding: 10px;
}
.container::-webkit-scrollbar {
width: 6px;
}
.container::-webkit-scrollbar-track {
background: #7070705e 0% 0% no-repeat padding-box;
border-radius: 100px;
}
.container::-webkit-scrollbar-button {
height: 14px;
}
.container::-webkit-scrollbar-thumb {
background: #707070 0% 0% no-repeat padding-box;
border-radius: 100px;
}<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tellus elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut at erat in purus fermentum sodales. Nulla vel nunc vel metus interdum venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce tincidunt porttitor massa, in aliquam mauris vehicula id. In non volutpat velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc nisi dolor, viverra et efficitur ornare, lobortis vel velit. Integer volutpat, justo eleifend cursus pellentesque, lectus turpis fringilla elit, sit amet ultrices est magna ac leo. Sed dolor ipsum, bibendum ac viverra vel, vehicula ac quam. Sed eu justo vitae turpis vehicula interdum.
Cras ultricies leo eu aliquet ullamcorper. Pellentesque eu placerat velit. Sed sit amet gravida metus, nec auctor lectus. Donec blandit purus id est vehicula gravida. Aenean viverra enim id leo pretium, rhoncus mollis magna fringilla. Ut ullamcorper tempus urna id efficitur. Integer sit amet mattis nibh, ac sagittis diam. Morbi feugiat lacinia tortor nec dapibus. Pellentesque lobortis nec risus ac lacinia. Maecenas iaculis nisl nec lacus vehicula vulputate. Sed nec tortor id dui condimentum pulvinar. Donec nulla nisi, convallis at consectetur gravida, suscipit eu ante. In bibendum congue nisi, eget ullamcorper lectus bibendum in. Integer semper tortor elementum dui vestibulum tincidunt. Suspendisse potenti. Mauris vel velit vel felis fringilla dignissim.
Sed mauris nunc, auctor ac velit at, tempor sagittis diam. Nullam volutpat rutrum faucibus. Mauris ultrices tempor tempor. Mauris varius mauris sed viverra sollicitudin. Praesent nec eros sed enim consequat commodo. Donec id dui at nisi elementum condimentum. Nulla luctus lacus eu aliquam condimentum. Morbi vel dapibus massa. In nibh lectus, commodo vel elit in, sagittis varius elit. Donec in ex lorem. Vivamus id mattis dolor, nec finibus augue. Curabitur ut justo eu velit congue maximus. Maecenas non augue erat. Nam euismod leo ut enim dignissim, vitae semper dolor rhoncus.
</div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta