CODEWITHSUNDEEP
javascripthtml
A.Burdonskaya
A.Burdonskaya

Reputation: 561

Detecting and prevent click on scrollbar

For example, i have a similar React component:

const result = document.getElementById('result');
const wrapper = document.getElementById('wrapper');
function fireHandle(){
result.innerHTML = 'fire'
setTimeout(() => result.innerHTML = '', 1000)
}
wrapper.addEventListener("mousedown", fireHandle);
 
#wrapper{
overflow: auto;
  white-space: nowrap;
  padding-bottom: 8px;
  max-width: 300px;
}

.box{
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
}
<div id='wrapper'>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
</div>

<h1 id='result'></h1>

I have multiply mouse event listeners on wrapper element and i need to show scrollbar, but prevent all functions, if user clicked on scrollbar. For above example: if user clicked on scrollbar, 'fire' shouldn't appear.

Upvotes: 3

Views: 1042

Answers (1)

Lakshya Thakur
Lakshya Thakur

Reputation: 8316

You can compare the click position and the box-height to know whether you are clicking the scroll bar or not.

const result = document.getElementById('result');
const wrapper = document.getElementById('wrapper');
const box = document.querySelector('.box');

function fireHandle(e) {
const clickYPos = e.clientY - e.currentTarget.getBoundingClientRect().y;
const boxHeight = parseInt(getComputedStyle(box).height);
const offset = (wrapper.offsetHeight-boxHeight)/4;
  if (clickYPos-offset<=boxHeight) {
    result.innerHTML = 'fire'
    setTimeout(() => result.innerHTML = '', 1000)
  }

}
wrapper.addEventListener("mousedown", fireHandle);
#wrapper {
  overflow: auto;
  white-space: nowrap;
  padding-bottom: 8px;
  max-width: 300px;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
}
<div id='wrapper'>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>

<h1 id='result'></h1>

Upvotes: 1

Related Questions