ARTICLE AD BOX
I'm trying to create a scrollable horizontal tray of thumbnails with custom scroll buttons and no scroll bar.
The tray will be wider than its parent div, and I want to have button-divs fixed/stickied to the parent div so they stay in the same position when the tray gets scrolled.
I've tried setting the button divs to position: absolute, but even though they're anchored to the parent div, they still scroll left and right with the tray div.
Here's a minimal working reproduction:
<html> <head> </head> <body> <style> .folio_ss_cont { position: relative; width: 50%; overflow: hidden; overflow-x: auto; background: #faa; color: #fff; } .folio_ss_slider { width: fit-content; min-width: 100%; display: flex; flex-flow: row nowrap; background: #afa; } .folio_ss_slider a { margin: min(3vw, 3vh); } .folio_ss_item_cont { width: 30vw; background: #aaf; } .folio_ss_item_thm { width: 100%; aspect-ratio: 1; margin-bottom: min(1vw, 1vh); } .folio_ss_item_cont p { margin-bottom: 0 !important; } .folio_ss_btn_scroll_L, .folio_ss_btn_scroll_R { position: absolute; bottom: 0; height: 33%; aspect-ratio: 1.5; box-sizing: border-box; background: #000; opacity: 0.36; padding: 3vw; display: flex; justify-content: center; align-items: center; font-size: 2em; } .folio_ss_btn_scroll_L { left: 0; } .folio_ss_btn_scroll_R { right: 0; } </style> <div class="folio_ss_cont"> <div class="folio_ss_slider" id="fss_slider_cine"> <a> <div class="folio_ss_item_cont"> <img class="folio_ss_item_thm" alt="Thumbnail image" src="/img/folio_thumbs/1.jpg" /> <p>Item 1</p> </div> </a> <a> <div class="folio_ss_item_cont"> <img class="folio_ss_item_thm" alt="Thumbnail image" src="/img/folio_thumbs/2.jpg" /> <p>Item 2</p> </div> </a> <a> <div class="folio_ss_item_cont"> <img class="folio_ss_item_thm" alt="Thumbnail image" src="/img/folio_thumbs/3.jpg" /> <p>Item 3</p> </div> </a> <a> <div class="folio_ss_item_cont"> <img class="folio_ss_item_thm" alt="Thumbnail image" src="/img/folio_thumbs/4.jpg" /> <p>Item 4</p> </div> </a> </div> <div class="folio_ss_btn_scroll_L" onclick="folioSliderScroll('L')">❰</div> <div class="folio_ss_btn_scroll_R" onclick="folioSliderScroll('R')">❱</div> </div> </body> </html>Initially it displays as it should, but then try scrolling the tray to the left — the big grey buttons scroll alongside the tray div, even though they're that div's siblings not its children!
I tried setting the button divs to position: sticky but that ends up adding their entire height to the container div and messes up their sizing as a result. It also only seems to make the left button div fixed — the right button div gets stuck to the very right edge of the tray and scrolls left and right along with it.
How do I keep these button divs fixed to the bottom left and right corners of the container div, while still allowing the tray div to be scrollable below them, and also allowing the <a> elements inside the tray to be clickable?
