Kevin Powell - Community•7mo ago

How can I fix this problem with buttons on the scrollbar?

So I made this slider (I am a beginner, its my first time doing it) and I wanted to add arrows to top and bottom of the slider. I used position:sticky; but when I reload the page the up-button creates its own space and starts there until I start to scroll which fixed the problem. How can I fix this?

.thumb-container {
    flex-wrap: wrap; 
    align-content: flex-start; 
    overflow-y: hidden; 
    overflow-x: hidden; 
    max-height: 100%;
    width: 10%;
    position: relative;
    display: inline-block;
    white-space: nowrap;
}


.thumb-container .prev {
    top: 0;
    left: 0;
    rotate: 90deg;
    position: sticky;
}

.thumb-container .next {
    bottom: 0;
    right: 0;
    rotate: 90deg;
    position: sticky;
}

.thumb {
    width: 100%; 
    object-fit: cover;
    margin-bottom: 8px; 
    cursor: pointer;
}

.thumb-container {
    flex-wrap: wrap; 
    align-content: flex-start; 
    overflow-y: hidden; 
    overflow-x: hidden; 
    max-height: 100%;
    width: 10%;
    position: relative;
    display: inline-block;
    white-space: nowrap;
}


.thumb-container .prev {
    top: 0;
    left: 0;
    rotate: 90deg;
    position: sticky;
}

.thumb-container .next {
    bottom: 0;
    right: 0;
    rotate: 90deg;
    position: sticky;
}

.thumb {
    width: 100%; 
    object-fit: cover;
    margin-bottom: 8px; 
    cursor: pointer;
}

2 Replies

isikmertOP•7mo ago

<div className="thumb-container" ref={thumbContainerRef}>
                <button onClick={prevImage} className="scroll-btn prev">❮</button>
                {renderThumbnails()}
                <button onClick={nextImage} className="scroll-btn next">❯</button>
            </div>

<div className="thumb-container" ref={thumbContainerRef}>
                <button onClick={prevImage} className="scroll-btn prev">❮</button>
                {renderThumbnails()}
                <button onClick={nextImage} className="scroll-btn next">❯</button>
            </div>

Choo♚𝕂𝕚𝕟𝕘•7mo ago

Use position absolute, but you have to choose the correct parent when you do this. If you choose wrong, the arrows will scroll away. They should be children of the outer container holding the content that scrolls.

Gaming

Programming

How can I fix this problem with buttons on the scrollbar?