滚动时动态调整Google Map所在div高度的实现咨询

看来你想实现的是滚动时让页面中部的Google Map容器动态伸缩高度，但现有脚本的体验不太理想——大概率是滚动时卡顿、高度变化太突兀，或者来回滚动时频繁切换状态对吧？我给你一套优化后的实现方案，解决这些问题：

1. 先解决滚动事件的性能问题 #

原生的scroll事件触发频率极高，每滚动1像素就可能触发一次，直接绑定逻辑会导致频繁DOM操作，页面卡顿。我们用节流函数限制触发频率，比如每100毫秒只执行一次逻辑：

// 简单的节流函数实现
function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

2. 添加平滑过渡动画，避免高度突变 #

给地图容器加上CSS过渡效果，让高度变化更自然，不会显得生硬：

#map-warp {
  /* 保留你原来的初始样式，比如初始高度、位置等 */
  height: 300px; /* 举例的初始高度，替换成你的实际值 */
  transition: height 0.3s ease; /* 添加上过渡动画，0.3秒可根据需求调整 */
}

/* 扩展后的样式 */
.change-map-canvas {
  height: 600px; /* 替换成你想要的扩展后高度 */
}

3. 区分滚动方向+双阈值，避免频繁切换状态 #

你的原有脚本只判断了滚动到450px时添加类，但用户来回滚动到阈值附近时，会反复添加/移除类，体验很差。我们可以记录上一次的滚动位置，判断滚动方向，并设置两个阈值（向下滚动到450px时扩展，向上滚动到350px时收缩），减少不必要的状态切换：

let lastScrollTop = 0;
const mapWrap = document.getElementById('map-warp');
const expandThreshold = 450; // 向下滚动到这个值时扩展地图
const shrinkThreshold = 350; // 向上滚动到这个值时收缩地图

// 用节流后的函数绑定滚动事件
window.addEventListener('scroll', throttle(() => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  if (scrollTop > lastScrollTop) {
    // 向下滚动逻辑
    if (scrollTop >= expandThreshold && !mapWrap.classList.contains('change-map-canvas')) {
      mapWrap.classList.add('change-map-canvas');
      // 如果使用Google Maps JS API，高度变化后需要触发resize让地图适配
      // google.maps.event.trigger(map, 'resize');
    }
  } else {
    // 向上滚动逻辑
    if (scrollTop <= shrinkThreshold && mapWrap.classList.contains('change-map-canvas')) {
      mapWrap.classList.remove('change-map-canvas');
      // 同样，如果用了Google Maps API，这里也可以触发resize
      // google.maps.event.trigger(map, 'resize');
    }
  }
  
  lastScrollTop = scrollTop;
}, 100)); // 每100ms触发一次，可根据流畅度调整

4. 处理页面加载时的初始状态 #

如果页面加载时，滚动位置已经超过了扩展阈值，我们需要直接给地图容器加上扩展类，避免初始状态不正确：

document.addEventListener('DOMContentLoaded', () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop >= expandThreshold) {
    mapWrap.classList.add('change-map-canvas');
    // 初始化时如果需要，也触发地图resize
    // google.maps.event.trigger(map, 'resize');
  }
});

额外提醒 #

如果你使用的是Google Maps JavaScript API，当地图容器高度变化后，记得调用google.maps.event.trigger(map, 'resize')来让地图重新计算尺寸，避免出现地图显示不全的问题（代码里已经加了注释，按需启用即可）。

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