Scrol Scroll

components.scrolly-parent.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  classNames: ['scrolly-parent'],
  
  didInsertElement() {
    let component = this;
    this.$().on('DOMMouseScroll mousewheel', (ev) => {
      let $this = component.$(),
          scrollTop = component.element.scrollTop,
          scrollHeight = component.element.scrollHeight,
          height = $this.innerHeight(),
          delta = ev.originalEvent.wheelDelta,
          up = delta > 0;
     
      let prevent = function() {
          ev.stopPropagation();
          ev.preventDefault();
          ev.returnValue = false;
          return false;
      }
     // debugger

      if (!up && -delta > scrollHeight - height - scrollTop) {
          // Scrolling down, but this will take us past the bottom.
          $this.scrollTop(scrollHeight);
          return prevent();
      } else if (up && delta > scrollTop) {
          // Scrolling up, but this will take us past the top.
          $this.scrollTop(0);
          return prevent();
      }
		});
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.scrolly-parent {
 	overflow-y: scroll;
  height: 200px;
  width: 300px;
  background: pink;
  padding: 0 0 0 10px;
}

templates.application.hbs

<h1>Scroll the pink scrolly part</h1>
<br>
<br>
{{outlet}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut enim pulvinar, laoreet turpis quis, elementum neque. Aenean luctus quam ligula, sagittis sodales enim tincidunt et. Nulla id euismod ante, nec gravida odio. Phasellus vestibulum risus eu ligula aliquam aliquet. Integer eu urna luctus, fermentum ipsum id, tincidunt ante. Proin ut lobortis diam. Integer fringilla vehicula gravida.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
{{#scrolly-parent}}
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
A very long text <br>
{{/scrolly-parent}}
Suspendisse et urna sed diam scelerisque faucibus. Suspendisse ultricies convallis nisi et maximus. Cras rhoncus ligula in cursus sagittis. Nullam ullamcorper augue eu mi semper, sed tempus quam finibus. Donec id sodales velit, eu lobortis ex. Duis mi sapien, scelerisque eget ligula a, elementum efficitur elit. Integer fermentum suscipit arcu sed condimentum. Praesent velit velit, fermentum ut augue vitae, interdum malesuada mi. Donec auctor molestie arcu id volutpat. Nulla facilisi. Maecenas aliquam velit tellus, vel fringilla dui condimentum sit amet.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Praesent faucibus a dolor vitae dictum. Sed dapibus, odio eget finibus vestibulum, justo est semper tortor, id suscipit urna erat et mauris. Praesent vehicula nisi velit. Curabitur tempus est sit amet ligula faucibus dapibus. Aenean porttitor massa ac imperdiet malesuada. Praesent tincidunt sit amet augue vel interdum. Proin eget ipsum eget odio convallis suscipit sit amet non mi. Fusce sollicitudin elit mauris, vitae porta felis consequat at. Phasellus ultricies sapien eu sagittis venenatis. Praesent efficitur felis et venenatis consectetur. Vestibulum luctus sapien quis urna posuere vestibulum. Cras a turpis sit amet metus bibendum blandit. Duis metus mi, porta id tempor accumsan, sollicitudin quis elit. Integer ut commodo mi, sit amet vehicula nunc. Vestibulum convallis ligula ac quam rhoncus, eu finibus turpis condimentum. Proin commodo eget felis nec cursus.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Aliquam dignissim pretium rhoncus. Cras eleifend ante sed pulvinar pellentesque. Nullam at est volutpat, rutrum lacus at, venenatis enim. Praesent semper sem a elit aliquam fringilla. Vestibulum facilisis augue sit amet diam accumsan faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin feugiat, sapien non egestas gravida, tellus lacus varius nulla, eget venenatis lorem arcu ac diam. Quisque cursus ultrices egestas. In a massa tempus, hendrerit elit ut, facilisis sem. Quisque feugiat turpis vel odio porttitor, a dignissim magna sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempor pretium arcu, eu pretium lacus pharetra non. Aliquam laoreet sagittis ullamcorper. Ut imperdiet arcu nulla, non elementum nunc rhoncus vel. Nulla sagittis metus eget libero bibendum euismod.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Etiam eu massa dolor. Sed quis neque gravida, elementum dui eget, hendrerit arcu. Donec malesuada tellus ligula, non auctor mauris aliquam tristique. Curabitur ornare pretium consectetur. Fusce ut egestas diam. Suspendisse vitae lacus nulla. Nam convallis dolor sit amet metus tincidunt, at mollis sapien tincidunt. Sed porttitor lacinia molestie. Vivamus ac nunc sapien. Praesent pulvinar ligula ut enim aliquet sagittis. Nunc in urna a turpis fringilla aliquet. Sed viverra ligula ut efficitur sodales. Vivamus commodo tempus tincidunt.


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

templates.components.scrolly-parent.hbs

Before yield
{{yield}}

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}