EmberJS新手求助：如何实现模态框滚动到底部时启用按钮

Hey there! Let's get that scroll-to-enable-button feature working for your Ember modal. I've got a couple of solid approaches to try out—one that fits with your existing controller setup, and another that leans into Ember's component-based pattern (which is better for reusable UI interactions).

方法1：基于Controller实现 #

First, let's adjust your template to bind the button's disabled state and set up the scroll event listener:

<div class="modal--dialog--body">
  <div class="app_tour--section--terms_container" id="message-container">
    <ul class="app_tour--section--ul">
      <!-- 你的大量列表项 -->
      <li>条款内容...</li>
      <li>条款内容...</li>
    </ul>
  </div>
  <!-- 绑定disabled状态到控制器的属性 -->
  <button {{action 'handleSubmit'}} disabled={{isButtonDisabled}}>同意并继续</button>
</div>

然后更新你的Controller，添加滚动逻辑、状态管理和事件清理：

import Ember from 'ember';

export default Ember.Controller.extend({
  // 初始状态：按钮禁用
  isButtonDisabled: true,

  actions: {
    handleSubmit() {
      // 按钮启用后的业务逻辑
      console.log('用户已阅读条款，提交操作触发');
    }
  },

  didTransition() {
    this._super(...arguments);
    // 获取滚动容器元素，添加scroll事件监听
    const container = document.getElementById('message-container');
    container.addEventListener('scroll', this._checkScrollPosition.bind(this));
  },

  willDestroy() {
    // 移除事件监听，避免内存泄漏
    const container = document.getElementById('message-container');
    container.removeEventListener('scroll', this._checkScrollPosition.bind(this));
    this._super(...arguments);
  },

  // 私有方法：判断是否滚动到底部
  _checkScrollPosition() {
    const container = document.getElementById('message-container');
    // 这里减5是为了容错，避免浏览器像素渲染差异导致无法触发
    const isScrolledToBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 5;
    
    // 更新按钮状态：滚动到底部则启用按钮
    this.set('isButtonDisabled', !isScrolledToBottom);
  }
});

方法2：组件化实现（更符合Ember最佳实践） #

Ember推荐用组件处理UI交互逻辑，这样代码更复用、更易维护。我们可以创建一个专门的条款模态框组件：

组件代码（app/components/terms-modal.js） #

import Ember from 'ember';

export default Ember.Component.extend({
  isButtonDisabled: true,

  didInsertElement() {
    this._super(...arguments);
    // 获取组件内的滚动容器，绑定scroll事件
    const container = this.element.querySelector('#message-container');
    container.addEventListener('scroll', this._checkScroll.bind(this));
  },

  willDestroyElement() {
    // 清理事件监听
    const container = this.element.querySelector('#message-container');
    container.removeEventListener('scroll', this._checkScroll.bind(this));
    this._super(...arguments);
  },

  _checkScroll() {
    const container = this.element.querySelector('#message-container');
    const isAtBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 5;
    this.set('isButtonDisabled', !isAtBottom);
  },

  actions: {
    submit() {
      // 将事件传递给父级（比如Controller）处理业务逻辑
      this.sendAction('onSubmit');
    }
  }
});

组件模板（app/templates/components/terms-modal.hbs） #

<div class="modal--dialog--body">
  <div class="app_tour--section--terms_container" id="message-container">
    <ul class="app_tour--section--ul">
      {{yield}} <!-- 这里插入外部传入的列表内容 -->
    </ul>
  </div>
  <button {{action 'submit'}} disabled={{isButtonDisabled}}>同意并继续</button>
</div>

在父模板中使用组件 #

{{!-- 比如在你的路由模板里 --}}
{{terms-modal onSubmit=(action 'handleTermsSubmit')}}
  <li>服务条款内容1...</li>
  <li>服务条款内容2...</li>
  <!-- 所有需要滚动的列表项 -->
{{/terms-modal}}

父Controller中的处理 #

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    handleTermsSubmit() {
      // 处理提交逻辑
      console.log('条款已确认，执行下一步');
    }
  }
});

关键要点说明 #

• 滚动判断逻辑：scrollTop是容器已滚动的距离，clientHeight是容器可见高度，scrollHeight是容器内容总高度。当两者之和接近总高度时，就认为滚动到底部了。
• 事件清理：一定要记得移除scroll事件监听，否则会导致内存泄漏，这在Ember的生命周期钩子（willDestroy/willDestroyElement）里处理最合适。
• 容错值：减去5像素是为了避免浏览器渲染的像素偏差，确保用户滚动到底部附近就能触发按钮启用。

内容的提问来源于stack exchange，提问作者Thilina Dinith Fonseka