Wheel event is not fired on a SVG group element in Safari

user_5379444 0
Viewed 160

I am trying to bind a wheel event listener to a SVG group element using D3. It seems the wheel event is not triggered when I scroll on the group element in Safari (group is not empty). It works fine on Firefox or Chrome.

let svg = d3.select('svg');

let group = svg.append('g')
  .attr('class', 'my-group');

group.on('wheel', (e) => {
  console.log('wheel!');
  e.preventDefault();
});

group.append('rect')
  .attr('width', 100)
  .attr('height', 100)
  .style('fill', 'darkorange');
<script src="https://d3js.org/d3.v6.min.js"></script>

<svg width="500" height="900" />

However, the wheel event is fired in Safari if I bind the listener to the SVG element instead.

let svg = d3.select('svg');

let group = svg.append('g')
  .attr('class', 'my-group');

svg.on('wheel', (e) => {
  console.log('wheel!');
  e.preventDefault();
});

group.append('rect')
  .attr('width', 100)
  .attr('height', 100)
  .style('fill', 'darkorange');
<script src="https://d3js.org/d3.v6.min.js"></script>

<svg width="500" height="900" />

Is there a way to bind wheel event to a single SVG group instead of the whole SVG element in Safari?

d3.js safari svg html javascript
1 Answers

I added

d3.select(document.body)
.on('wheel.body', e => {});

before binding a wheel event to an SVG element. This solved the problem somehow.

let svg = d3.select('svg');

let group = svg.append('g')
  .attr('class', 'my-group');

d3.select(document.body)
.on('wheel.body', e => {});

group.on('wheel', (e) => {
  console.log('wheel!');
  e.preventDefault();
});

group.append('rect')
  .attr('width', 100)
  .attr('height', 100)
  .style('fill', 'darkorange');
<script src="https://d3js.org/d3.v6.min.js"></script>

<svg width="500" height="900" />

user_161896390
Related