Disabling D3-Zoom on ForeignObject to enable scrolling inside

[Silvan Mühlemann]

I'm using D3.js to create an SVG element with zoom functionality. Inside this SVG, I also have a foreignObject that contains an HTML div. I would like to be able to scroll the content inside this div.

Here's some simplified example code to illustrate the setup:

const svg = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 600);

const zoom = d3.zoom().on("zoom", zoomed);

svg.call(zoom);

function zoomed(event) {
  // Zoom logic here
}

const fo = svg.append("foreignObject")
    .attr("width", 200)
    .attr("height", 200)
    .append("xhtml:div")
    .attr("class", "scroll-div")
    .style("overflow", "auto");

// Add content to the div

I've tried to disable the zoom on the foreignObject using D3's .on method like so:

d3.select('foreignObject')
  .on('mousedown.zoom', null)
  .on('touchstart.zoom', null)
  .on('touchmove.zoom', null)
  .on('touchend.zoom', null);

However, this doesn't seem to work. The foreignObject still doesn't allow me to scroll the content inside the div.

Does anyone have any ideas on how to disable the D3 zoom specifically for the foreignObject so that I can scroll its content?