Как сделать наложенный div прикрепленным к родительскому div, который можно прокручивать по горизонтали? ⇐ CSS

[Anonymous]

Почти то, что указано в заголовке. Я пытаюсь сделать эти круглые кнопки возможностью горизонтальной прокрутки. Я также хотел бы сообщить пользователю, есть ли еще что-то для прокрутки в любом направлении, поэтому я пытаюсь сделать это через наложение. На данный момент кажется, что наложения перемещаются при прокрутке, я бы хотел, чтобы они придерживались сторон круглых кнопок.
Вот код, который я пробовал:

Код: Выделить всё

Scrollable Circular Buttons

/* Custom styles */
.scrollable-div {
position: relative;
width: 50%;
overflow-x: auto;
white-space: nowrap;
padding: 10px 0;
margin-bottom: 20px;
/* Hide the scrollbar */
scrollbar-width: none;
}
.scrollable-div::-webkit-scrollbar {
display: none; /* WebKit (Safari, Chrome) */
}
.circular-btn {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #007bff; /* Bootstrap primary color */
color: #fff;
text-align: center;
line-height: 40px;
margin-right: 5px; /* Reduced margin */
cursor: pointer;
font-size: 16px;
}
.scroll-overlay {
position: absolute;
top: 0;
bottom: 0;
width: 50px; /* Adjust as needed */
pointer-events: none; /* Allow clicks to pass through */
}
.scroll-overlay-left {
left: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);

}
.scroll-overlay-right {
right: 0;
background: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);

}
.selected {
background-color: #28a745 !important; /* Bootstrap success color */
}





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30





document.addEventListener("DOMContentLoaded", function() {
const scrollableDiv = document.getElementById('scrollableDiv');
const scrollOverlayLeft = document.querySelector('.scroll-overlay-left');
const scrollOverlayRight = document.querySelector('.scroll-overlay-right');

// Check scroll status on initial load
updateOverlayVisibility();

// Update overlay visibility based on scroll position
scrollableDiv.addEventListener('scroll', updateOverlayVisibility);

function updateOverlayVisibility() {
const scrollPosition = scrollableDiv.scrollLeft;
const scrollWidth = scrollableDiv.scrollWidth;
overlayWidth = Math.min((scrollPosition / scrollWidth) * 50 , 50);
scrollOverlayLeft.style.width = overlayWidth + ' px';
scrollOverlayRight.style.width = overlayWidth + ' px';
scrollOverlayLeft.style.display = scrollPosition > 0 ? 'block' : 'none';
scrollOverlayRight.style.display = scrollPosition < scrollWidth ? 'block' : 'none';

}

// JavaScript for circular button selection
const circularButtons = document.querySelectorAll('.circular-btn');

circularButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
// Remove 'selected' class from all buttons
circularButtons.forEach(function(btn) {
btn.classList.remove('selected');
});
// Add 'selected' class to the clicked button
this.classList.add('selected');
});
});
});

Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/782 ... -horizonta