0
270
Views¿Es posible alinear elementos secundarios según el radio del borde de los padres?
Estoy creando una barra de desplazamiento personalizada con divisiones posicionadas absolutas a la derecha (para vertical) y en la parte inferior (para horizontal).
Cuando hay un radio de borde en el padre, ambos bordes de las barras de desplazamiento se ocultan.
¿Hay alguna forma en que podamos alinear los elementos secundarios en función del radio del borde del elemento principal? Como esto:
A continuación se muestra mi 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>A continuación se muestra mi 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 answers
Answer question0
Aquí. Tienes que establecer la altura del "botón de la barra de desplazamiento".
.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
Report
Answer question