Функция прокрутки не работает в мобильных браузерах ⇐ CSS

[Anonymous]

Я создал веб-сайт и столкнулся с проблемой вертикальной прокрутки карточек с отзывами. Он плавно работает в настольных браузерах, но в браузерах Samsung (Chrome) или в браузере любого телефона (Android) прокрутка происходит не плавно или просто не прокручивается.
Я попробовал создать .card -wrapper class overflow-y в auto из скрытого, но он создает полосу прокрутки справа, что делает ее странной, потому что я ожидаю сделать это с помощью прокрутки кнопка.
Кроме того, в JavaScript добавлена ​​строка для управления максимальной скоростью прокрутки:

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

let scrollAmount = window.innerWidth < 768 ? 50 : 100;
< /code>
также наконец -то попробовал: < /p>
btnScrollUp.addEventListener('click', () => scrollVertically(1));
btnScrollUp.addEventListener('touchstart', () => scrollVertically(1));

[Ссылка на мою работу в codepen][https://codepen.io/TA0011/pen/mybQVPY]

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

//scroll ing of testimonial cards
document.addEventListener('DOMContentLoaded', function () {
const cardWrapper = document.querySelector('.card-wrapper');
const btnScrollUp = document.getElementById('btn-scroll-up');
const btnScrollDown = document.getElementById('btn-scroll-down');

let scrollAmount = 100; // Amount to scroll each time

function scrollVertically(direction) {
const scrollHeight = cardWrapper.scrollHeight;
const clientHeight = cardWrapper.clientHeight;
const currentScrollPosition = cardWrapper.scrollTop;

// Scroll up
if (direction === 1) {
cardWrapper.scrollBy({
top: -scrollAmount,
behavior: 'smooth'
});
}
// Scroll down
else {
cardWrapper.scrollBy({
top: scrollAmount,
behavior: 'smooth'
});
}

// Update button visibility after scrolling
setTimeout(updateScrollButtons, 300); // Delay to allow for smooth scrolling
}

function updateScrollButtons() {
const currentScrollPosition = cardWrapper.scrollTop;
const maxScrollHeight = cardWrapper.scrollHeight - cardWrapper.clientHeight;

if (currentScrollPosition = maxScrollHeight) {
btnScrollDown.style.display = 'none'; // Hide down button
} else {
btnScrollDown.style.display = 'flex'; // Show down button
}
}

// Initialize scroll button visibility
updateScrollButtons();

// Event listeners for buttons
btnScrollUp.addEventListener('click', () => scrollVertically(1));
btnScrollDown.addEventListener('click', () => scrollVertically(-1));

// Add scroll event listener to update button visibility when scrolling manually
cardWrapper.addEventListener('scroll', updateScrollButtons);

// Add event listeners for "View More" buttons
const viewMoreButtons = document.querySelectorAll('.view-more-btn');
viewMoreButtons.forEach(button => {
button.addEventListener('click', function () {
const cardDetails = this.parentElement.querySelector('.card-text');
cardDetails.classList.toggle('expanded'); // Toggle the expanded class

// Scroll to the bottom of the card wrapper if expanding the last card
if (this.closest('.card') === cardWrapper.lastElementChild) {
cardWrapper.scrollTo({
top: cardWrapper.scrollHeight, // Scroll to the bottom of the card wrapper
behavior: 'smooth' // Smooth scroll
});
}

this.textContent = cardDetails.classList.contains('expanded') ? 'View Less' : 'View More';  // Change button text

// Update scroll button visibility
updateScrollButtons();
});
});
});< /code>
:root {
--primary-color: #00605f;
--secondary-color: #017479;
--text-dark: #0f172a;
--white: #ffffff;
}
.testimonial-container-right {
grid-area: testimonial-container-right;
display: flex;
flex-direction: column;
}

.vertical-scroll {
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* Change to relative for positioning */
}

.btn-scroll {
font-size: 2rem;
outline: none;
border: none;
color: var(--white);
cursor: pointer;
background: var(--primary-color);
transition: .3s all ease;
}

#btn-scroll-up,
#btn-scroll-down {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
/* Ensure it's displayed as a flex container */
z-index: 1;
padding: .5rem 1rem;
}

#btn-scroll-up {
border-radius: 0 0 1rem 1rem;
top: 0;
}

#btn-scroll-down {
border-radius: 1rem 1rem 0 0;
bottom: 0;
}

.btn-scroll:hover,
.btn-scroll:focus {
background-color: var(--secondary-color);
}

.card-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 1rem;
height: 650px;
overflow-y: hidden;
position: relative;
}

.card {
padding: 2rem;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 1rem;
background-color: var(--white);
border-radius: 1rem;
cursor: pointer;
max-height: auto;
border: 1px solid var(--secondary-color);
-webkit-user-select: none;
/* Safari */
-ms-user-select: none;
/* IE 10 and IE 11 */
user-select: none;
/* Standard syntax */
max-width: 650px;
/*word-break: break-all;*/
}

.testi-image {
display: flex;
align-items: center;
justify-content: center;
}

.card img {
width: 75px;
/* Set a max width for the preview */
height: 75px;
/* Set a max height for the preview */
border-radius: 50%;
border: 1px solid #eee;
float: none;
pointer-events: none;
}

.card__content {
display: flex;
gap: 1rem;
flex: 1;
max-width: 100%;
}

.card__content span i {
font-size: 2rem;
color: var(--primary-color);
}

.card__details {
flex-grow: 1;
/* Allow it to grow */
flex-shrink: 1;
/* Allow it to shrink */
min-width: 0;
/* Avoid forcing unnecessary width */
max-width: 100%;
/* Prevent overflow beyond container */
overflow: hidden;
}

.card__details p {
max-width: 100%;
font-size: 1rem;
font-style: italic;
font-weight: 400;
color: var(--text-dark);
margin-right: 1rem;
margin-bottom: 1rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
/* Limit to 3 lines */
-webkit-box-orient: vertical;
transition: max-height 0.3s ease;
max-height: 4.5em;
/* Adjust based on line height */

}

.card__details p.expanded {
-webkit-line-clamp: unset;
/* Remove line limit */
max-height: none;
/* Allow full height */
}

.card__details h4 {
text-align: right;
color: var(--primary-color);
font-size: 1rem;
font-weight: 500;
}

.card__details h5 {
text-align: right;
color: var(--primary-color);
font-size: .8rem;
font-weight: 400;
margin-bottom: .1rem;
}

.card__details h6 {
text-align: right;
color: var(--text-light);
font-size: .7rem;
font-weight: 400;
display:  flex;
/* Use flexbox for better alignment */
align-items: center;
/* Center align items vertically */
justify-content: flex-end;
/* Align content to the right */
margin-top: 0;
margin-bottom: 0;
}

.rating-stars_in_card {
height: 30px;
position: absolute;
vertical-align: baseline;
color: #b9b9b9;
line-height: 10px;
float: left;
margin: 1rem 0;
}

.card__details button {
padding: .5rem 1rem;
outline: none;
border: none;
border-radius: 5px;
background: linear-gradient(to right, #ff226f,
#fe6769);
color: var(--white);
font-size: .8rem;
cursor: pointer;
}

@media(max-width:768px){
.testimonial-container-right{
margin: 1rem 0 1rem 0;
}
.card-wrapper{
height: 500px;
}
.btn-scroll{
font-size: 1rem;
}
#btn-scroll-up,
#btn-scroll-down {
padding: .25rem .5rem;
}
.card{
display:flex;
flex-direction: column; /* Stack elements vertically */
align-items: center; /* Center items horizontally */
gap:0;
width: 300px;
}
.card img{
width: 60px;
height: 60px;
margin-bottom: 1rem; /* Add some space below the image */
order: -1; /* Ensure the image appears first */
}
.rating-stars_in_card {
margin-top: 0.5rem; /* Add some spacing below the image */
}
.card__content{
display: flex;
gap:1rem;
}
.card__content span i{
font-size: 1.5rem;
}
.card__details p{
font-size: .8rem;
margin-bottom: 0.5rem;
}
.card__details h4{
font-size: .8rem;
margin-top: 1.5rem;
}
.card__details h5{
font-size: .7rem;
margin-bottom: .1rem;
}
.card__details h6{
font-size: .6rem;
}
.card__details button{
padding: .25rem .5rem;
font-size: .6rem;
}
}< /code>





[i][/i]




[i]

[/i]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia nisl, ac dapibus magna. Morbi malesuada orci vitae turpis egestas, sit amet pellentesque massa auctor. Etiam id bibendum tellus. Duis accumsan in metus a rutrum. Nam ac rutrum sem, non aliquet neque. Aliquam vulputate interdum finibus. Vestibulum eu efficitur ligula. Nunc felis turpis, tincidunt gravida commodo a, maximus et dui. In fringilla ante vitae tortor venenatis, ac luctus urna faucibus.
View More





[h4]~ techieafrohead[/h4]
India(Amity)
Service





[i]

[/i]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia nisl, ac dapibus magna. Morbi malesuada orci vitae turpis egestas, sit amet pellentesque massa auctor. Etiam id bibendum tellus. Duis accumsan in metus a rutrum. Nam ac rutrum sem, non aliquet neque. Aliquam vulputate interdum finibus. Vestibulum eu efficitur ligula. Nunc felis turpis, tincidunt gravida commodo a, maximus et dui. In fringilla ante vitae tortor venenatis, ac luctus urna faucibus.
View More





[h4]~ techieafrohead[/h4]
India(Amity)
Service





[i]

[/i]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia nisl, ac dapibus magna. Morbi malesuada orci vitae turpis egestas, sit amet pellentesque massa auctor. Etiam id bibendum tellus. Duis accumsan in metus a rutrum. Nam ac rutrum sem, non aliquet neque. Aliquam vulputate interdum finibus. Vestibulum eu efficitur ligula. Nunc felis turpis, tincidunt gravida commodo a, maximus et dui. In fringilla ante vitae tortor venenatis, ac luctus urna faucibus.
View More





[h4]~ techieafrohead[/h4]
India(Amity)
Service





[i]

[/i]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in lacinia nisl, ac dapibus magna. Morbi malesuada orci vitae turpis egestas, sit amet pellentesque massa auctor. Etiam id bibendum tellus. Duis accumsan in metus a rutrum. Nam ac rutrum sem, non aliquet neque. Aliquam vulputate interdum finibus. Vestibulum eu efficitur ligula. Nunc felis turpis, tincidunt gravida commodo a, maximus et dui. In fringilla ante vitae tortor venenatis, ac luctus urna faucibus.
View More





[h4]~ techieafrohead[/h4]
India(Amity)
Service






[i][/i]

Подробнее здесь: https://stackoverflow.com/questions/793 ... e-browsers