我正在尝试制作一个 ember 组件,它会在加载时滚动到其自身的底部(它是聊天窗口的 View )
我得到了组件:
从“ember”导入 Ember;
export default Ember.Component.extend({
didRender() {
const el = this.$('.chat-window');
el.scrollTop(el[0].scrollHeight);
}
});
然后是组件hbs文件
<div class="chat-window">
{{yield}}
</div>
然后是模板 View
{{#chat-window}}
{{chat-message username="John Doe" message="Blah Blah Blah" dispic="http://www.proirrigationwi.com/images/unknown_user.png"}}
{{chat-message username="John Doe" message="Blah Blah Blah" dispic="http://www.proirrigationwi.com/images/unknown_user.png"}}
{{chat-message username="John Doe" message="Blah Blah Blah" dispic="http://www.proirrigationwi.com/images/unknown_user.png"}}
{{/chat-window}}
如果我替换 {{#chat-window}} {{/chat-window}}
与
<div class="chat-window"></div>
一切正常
但是如果我尝试使用该组件,溢出将被忽略并且聊天消息会离开屏幕而不会滚动。任何信息都将非常感谢。
聊天窗口的 CSS
.chat-window {
height: 75%;
width: 100%;
overflow: scroll;
word-wrap: break-word;
}
预览:
如果我像上面说的那样用纯 html 替换组件,它将停止并且溢出按预期工作
最佳答案
由于某些原因,似乎直接在组件内使用 class="chat-window"
不起作用。
但是当我这样做的时候
{{#chat-window class="chat-window"}}
一切正常
关于javascript - Ember 组件忽略高度/溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37123306/