JS技术求助：滚动.maincom div时修改其高度（仅监听该div滚动）

Got it, let's fix this up exactly how you need it. The core idea is to listen directly to the scroll event of your .maincom div (not the whole window) and adjust its height when that scroll happens.

完整代码示例 #

补全后的HTML结构（基于你的示例）

<div class="maincom" style="height: 160px; overflow-y: scroll;">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#comments" data-toggle="tab">Comments</a>
    </li>
    <!-- 可以添加更多标签页选项 -->
  </ul>
  <!-- 填充足够内容让容器能滚动 -->
  <div class="tab-content">
    <div class="tab-pane active" id="comments">
      <p>Comment 1</p>
      <p>Comment 2</p>
      <p>Comment 3</p>
      <p>Comment 4</p>
      <p>Comment 5</p>
      <p>Comment 6</p>
      <p>Comment 7</p>
      <p>Comment 8</p>
      <p>Comment 9</p>
      <p>Comment 10</p>
    </div>
  </div>
</div>

JavaScript 实现

// 获取目标容器元素
const mainComContainer = document.querySelector('.maincom');

// 监听容器自身的滚动事件
mainComContainer.addEventListener('scroll', function() {
  // 修改容器高度为350px
  this.style.height = '350px';

  // 如果你只需要触发一次滚动后就不再修改高度，取消下面这行的注释
  // this.removeEventListener('scroll', arguments.callee);
});

关键细节说明 #

• 为什么不监听window滚动？：window的scroll事件触发的是整个页面的滚动，而我们要的是.maincom容器内部的滚动行为，直接给这个元素绑定scroll事件才是精准触发的正确方式。
• 样式优化建议：如果你的项目更注重样式与逻辑分离，可以预先定义一个CSS类，然后通过添加类来修改高度：

  .maincom-expanded {
    height: 350px !important;
  }
  

  对应的JavaScript改成：

  mainComContainer.classList.add('maincom-expanded');
  

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