hey guys so I am trying to do a grab scroll for my webpage but it is not working somehow I’ve set up the Section element with the “content” id and I’m just using this css to test it
#content {
background-color: red;
width: 200px;
height: 250px;
overflow-x: hidden;
overflow-y: scroll;
cursor: grab;
}
#content div {
background-color: blue;
margin: 30px;
width: 100px;
height: 100px;
}
but the javascript works on jsfiddle but not on Bricks, I’ve tried it to paste in the code element, Page Settings and the Settings-custom code but it is not working here’s the JS
const content = document.getElementById(‘content’);
let isDown = false;
let startY;
let scrollTop;
content.addEventListener(‘mousedown’, (e) => {
isDown = true;
startY = e.pageY;
scrollTop = content.scrollTop;
});
content.addEventListener(‘mouseleave’, () => {
isDown = false;
});
content.addEventListener(‘mouseup’, () => {
isDown = false;
});
content.addEventListener(‘mousemove’, (e) => {
if (isDown) {
e.preventDefault();
const y = e.pageY;
const scrollAmount = (y - startY) * 2; // Adjust this value for scroll speed
content.scrollTop = scrollTop - scrollAmount;
}
});
is there any other way to do this, thanks or what might be the problem!?
Edit: the jsfiddle
