1

我在一个 div 中显示多个名称，然后该 div 应该是可滚动的。

 <script type="text/x-handlebars" data-template-name="index">
   {{#linkTo "names"}}Display Names{{/linkTo}}
   {{outlet}}
 </script>

当我点击显示名称时，我必须显示所有名称，所以我创建了另一个这样的模板

  <script type="text/x-handlebars" data-template-name="names">
    <div class="container">
     {{#each model}}
       <div>{{name}}</div>
     {{/each}}
    </div>
  </script>

如果该 div 高度的子级大于该 div，我必须为容器 div 应用滚动。

我已经在 ember.js 文件中完成了这样的操作

App.Router.map(function() {
  this.resource('names');
});

App.NamesRoute=Ember.Route.extend({
  model: function() {
    return namedetails;
  }
});

它正在显示，但我不知道如何在 ember.js 中为该容器 div 设置滚动

如何设置？

4

1 回答 1

0

基本上你需要做的就是申请overflow: auto;你的container班级：

CSS

.container {
  overflow: auto;
}

但是，如果您希望将 css 应用于names相应的模板，div那么您应该view为您的names模板添加一个并定义适当的classNameBindings：

CSS

.auto-scroll {
  overflow: auto;
}

Javascript

App.NamesView = Ember.View.extend({
  classNameBindings: ['auto-scroll']
});

请注意，当容纳内容的大小不足时，会overflow:auto显示滚动条。div另外值得一提的是，overflow可以将其设置为不同的行为，例如：

overflow: auto; /* scroll bars appear, only when they are needed */
overflow: scroll; /* scroll bars appear always */

overflow-x: auto; /* only horizontal scroll bars appear, when they are needed */
overflow-y: auto; /* only vertical scroll bars appear, when they are needed */

overflow-x: scroll; /* horizontal scroll bars appear always */
overflow-y: scroll; /* vertical scroll bars appear always */

希望能帮助到你。

于 2013-08-22T14:03:53.990 回答