Написал небольшой скрипт для горизонтальной прокрутки таблицы, который еще добавляет определенней класс, когда таблица полностью прокручена, но для того, чтобы он корректно работал, нужна фактическая ширина таблицы с учетом скролла (на ней стоит css свойство overflow-x: hidden;). Но браузер, по какой-то причине, передает размеры отличные от фактических. Причем, если долго перезагружать таблицу, то иногда передаются и корректные данные. Если через инспектор выбрать элемент, то ширина всегда корректная и неизменная. В чем может быть причина?
//Горизонтальная прокрутка таблицы
document.addEventListener('DOMContentLoaded', horizontalTableScrolling);
function horizontalTableScrolling (){
const width = document.querySelector('.wires-table__shadow');
const scrollWidth = document.querySelector('.table__main').scrollWidth;
const buttons = document.querySelector('.wires-table__button-wrapper');
addClasses()
buttons.addEventListener('click', (e) => {
if(e.target.attributes[1].value === 'right'){
width.scrollLeft += 40
addClasses()
}else if(e.target.attributes[1].value === 'left'){
width.scrollLeft -= 40
addClasses()
}
})
function addClasses() {
console.log(scrollWidth, width.offsetWidth, width.scrollLeft);
if(width.scrollLeft === 0){
width.classList.add('wires-table__shadow_left');
width.classList.remove('wires-table__shadow_center');
}else if(scrollWidth - width.offsetWidth === width.scrollLeft){
width.classList.remove('wires-table__shadow_center');
width.classList.add('wires-table__shadow_right');
}else{
width.classList.add('wires-table__shadow_center');
width.classList.remove('wires-table__shadow_right', 'wires-table__shadow_left');
}
}
function scrollHorizontally(e) {
e = window.event || e;
let delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
document.querySelector('.wires-table__shadow').scrollLeft -= delta * 40;
e.preventDefault();
addClasses()
}
if (document.querySelector('.wires-table__shadow').addEventListener) {
// IE9, Chrome, Safari, Opera
document.querySelector('.wires-table__shadow').addEventListener('mousewheel', scrollHorizontally, false);
// Firefox
document.querySelector('.wires-table__shadow').addEventListener('DOMMouseScroll', scrollHorizontally, false);
} else {
// IE 6/7/8
document.querySelector('.wires-table__shadow').attachEvent('onmousewheel', scrollHorizontally);
}
};