Как сделать тень у 1 столбца при начале скроллинга в право, а у последнего убрать тень когда скроллинг завершится?
Как сделать тень у первого столбца при начале скроллинга в право, а у последнего убрать тень когда скроллинг в право завершится?
Первый и последний столбцы зафиксированы с помощью position: stiky; прокручиваются все остальные столбцы по горизонтали.
Делал по примеру на codepen: https://codepen.io/thenutz/pen/VwYeYEE:
код прокрутки javascript:
const slider = document.querySelector(".t-catalog__outer");
let isDown = false;
let startX;
let scrollLeft;
// нахожу ячейки 1-го столбца, чтобы потом задать им тень после начала скроллинга в право
const tableThFirst = document.querySelector(
".t-catalog__outer th:nth-child(1)"
);
const tableTdFirst = document.querySelectorAll(
".t-catalog__outer td:nth-child(1)"
);
slider.addEventListener("mousedown", (e) => {
isDown = true;
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave", () => {
isDown = false;
});
slider.addEventListener("mouseup", () => {
isDown = false;
});
slider.addEventListener("mousemove", (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 1; //scroll-fast * 3
slider.scrollLeft = scrollLeft - walk;
});