Public
Edited
Apr 16, 2023
{
const container = document.querySelector('.container');
let isDown = false;
let startX;
let scrollLeft;
container.addEventListener('mousedown', (e) => {
isDown = true;
container.classList.add('active');
startX = e.pageX - container.offsetLeft;
scrollLeft = container.scrollLeft;
});
container.addEventListener('mouseleave', () => {
isDown = false;
container.classList.remove('active');
});
container.addEventListener('mouseup', () => {
isDown = false;
container.classList.remove('active');
});
container.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - container.offsetLeft;
const walk = (x - startX) * 3;
container.scrollLeft = scrollLeft - walk;
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
