Probably there was a recent Chrome update which brake d3 zoom on scroll feature. Everything still works perfectly fine with e.g. Edge. Please check this simple example for a proof - http://bl.ocks.org/nnattawat/9689303
Maybe anyone knows how we can revert to an older Chrome version to get this feature working again?
I have also been running into this "bug" also - see this github thread about it
In most of the examples that I've seen where it is no longer working in Chrome 89.0.4389.90 (Windows) anymore, the zoom is being attached to the non-root SVG element.
As in the d3-zoom observable example, make sure it is the root SVG is the element that d3.zoom() is called on, not a <g> or <rect>:
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const g = svg.append("g");
g.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", ([x]) => x)
.attr("cy", ([, y]) => y)
.attr("r", 1.5);
svg.call(d3.zoom()
.extent([[0, 0], [width, height]])
.scaleExtent([1, 8])
.on("zoom", zoomed));
function zoomed({transform}) {
g.attr("transform", transform);
}
return svg.node();
We had the same issue on Chrome in our CMS. Installed the https://www.smoothscroll.net/win/?extension The issue is gone.
Or check out this from the same author: https://github.com/gblazex/smoothscroll-for-websites
As temporary fix you can run this on page load:
window.addEventListener('wheel', () => {})