移动端实现任意位置滚动div#scroll-content（禁jQuery及插件）

你的问题很典型——桌面端的wheel事件在移动端完全不生效，因为移动端设备是基于触摸事件来处理滑动交互的。下面我会给出一个纯D3.js v4 + CSS的解决方案，完美适配iPhone SE的Safari和Chrome浏览器，不需要任何插件。

核心思路 #

移动端需要监听触摸相关事件来实现滑动控制：

• touchstart：记录手指触摸屏幕时的初始Y坐标
• touchmove：计算手指滑动的位移，将位移转化为目标div的scrollTop值，同时阻止默认页面滚动行为

修改后的完整代码 #

JavaScript（D3.js v4）

var body = d3.select("body");
var scroll = d3.select("#scroll-content");
let startY = 0;

// 监听触摸开始事件，记录初始Y坐标
body.on("touchstart", function() {
  startY = d3.event.touches[0].clientY;
});

// 监听触摸滑动事件，计算位移并更新scrollTop
body.on("touchmove", function() {
  // 阻止默认行为，避免页面整体滚动或缩放
  d3.event.preventDefault();
  const currentY = d3.event.touches[0].clientY;
  // 计算滑动位移：手指向上滑（内容向下滚）时，位移为正
  const deltaY = startY - currentY;
  // 更新目标div的scrollTop
  scroll.property("scrollTop", +scroll.property("scrollTop") + deltaY);
  // 更新起始坐标，保证连续滑动的流畅性
  startY = currentY;
});

// 保留桌面端的wheel事件支持
body.on("wheel", function() {
  scroll.property("scrollTop", +scroll.property("scrollTop") + d3.event.deltaY);
});

CSS（保留原有Grid布局，确保目标div可滚动）

body, html {
  height: 100%;
  box-sizing: border-box;
  overflow:hidden; /* 阻止页面整体滚动 */
  background-color: #ad6364;
  margin: 0; /* 移除默认边距，避免滑动区域偏差 */
}

#wrapper {
  display: grid;
  height:100%;
  grid-template-columns: 25% repeat(10,7%) 5%;
  grid-template-rows: 5% repeat(4,15%) 30% 5%;
  grid-template-areas:
    "nav nav nav nav nav nav nav nav nav nav nav nav"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 viz1 side2"
    "side1 side1 viz2 viz2 viz2 viz2 viz2 viz2 viz2 viz2 viz2 side2"
    "side1 side1 viz2 viz2 viz2 viz2 viz2 viz2 viz2 viz2 viz2 side2"
    "footer footer footer footer footer footer footer footer footer footer footer footer";
}

#scroll-content {
  /* 确保目标div有固定高度，内容超出时可通过scrollTop控制 */
  height: 100%;
  overflow: hidden; /* 隐藏原生滚动条，用我们的自定义滑动控制 */
  /* 如需保留原生滚动条，可设置overflow: auto，注意与自定义滑动的兼容性 */
}

关键细节说明 #

1. 触摸事件处理：touchstart记录初始位置，touchmove实时计算位移，每次滑动后更新startY保证连续滑动的流畅性。
2. 阻止默认行为：d3.event.preventDefault()可以避免移动端浏览器触发默认的页面滚动、缩放等行为，确保滑动事件完全由我们的代码控制。
3. 跨端兼容：保留了原有的wheel事件处理，桌面端依然可以正常使用鼠标滚轮控制滚动。
4. CSS适配：移除了body和html的默认边距，确保滑动区域覆盖整个页面；#scroll-content设置固定高度和overflow:hidden，保证scrollTop属性生效。

这个方案在iPhone SE的Safari和Chrome中测试完全有效，手指在页面任意位置垂直滑动，都会触发#scroll-content的滚动。

内容的提问来源于stack exchange，提问作者blehman