Подскажите как скрыть скролл в mozilla, но оставить возможность скролить? В в opera и chrome все отлично, но в mozilla не работает, может кто-нибудь сталкивался с таким? Спасибо
https://jsfiddle.net/jb9Lcv2d/3/
function scrollCompare() {
let speed = 2;
let scroll = document.querySelector('.compare__body');
let scrollMainBlock = document.querySelector('.compare__main-column');
let left = 0;
let drag = false;
let coorX = 0;
scroll.addEventListener('mousedown', function(e) {
drag = true;
coorX = e.pageX;
console.log(1);
});
document.addEventListener('mouseup', function() {
drag = false;
left = scroll.scrollLeft;
});
scroll.addEventListener('mousemove', function(e) {
if (drag) {
this.scrollLeft = left - (e.pageX - coorX) * speed;
}
});
scroll.addEventListener('scroll', function(e) {
if (window.innerWidth > 768)
scrollMainBlock.style.transform = 'translateX(' + this.scrollLeft + 'px)';
else scrollMainBlock.style.transform = '';
});
window.addEventListener('resize',
e => scroll.dispatchEvent(new CustomEvent('scroll'))
);
};
scrollCompare();
.compare__body {
display: flex;
flex-wrap: nowrap;
overflow: auto;
height: 400px;
}
.compare__main-row {
width: 310px;
min-height: 80px;
background: red;
}
.compare__product-row {
width: 330px;
min-height: 80px;
background: yellow;
}
.compare__body::-webkit-scrollbar {
width: 0px;
background: transparent;
}
<div class="compare__wrap">
<div class="compare__block">
<div class="compare__scroll">
<div class="compare__content">
<div class="compare__body">
<div class="compare__main-column">
<div class="compare__main-row head-row"></div>
<div class="compare__main-row">Цена</div>
<div class="compare__main-row">Цена</div>
<div class="compare__main-row">Цена</div>
<div class="compare__main-row">Цена</div>
<div class="compare__main-row">Цена</div>
<div class="compare__main-row">Цена</div>
<div class="compare__main-row">Цена</div>
<div class="compare__main-row">Цена</div>
<div class="compare__main-row">Цена</div>
</div>
<div class="compare__product">
<div class="compare__product-row head-row"></div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
</div>
<div class="compare__product">
<div class="compare__product-row head-row"></div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
</div>
<div class="compare__product">
<div class="compare__product-row head-row"></div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
</div>
<div class="compare__product">
<div class="compare__product-row head-row"></div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
</div>
<div class="compare__product">
<div class="compare__product-row head-row"></div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
<div class="compare__product-row">1002</div>
</div>
</div>
</div>
</div>
</div>
</div>