New Twiddle

components.anti-scroll.js

import Ember from 'ember';

export default Ember.Component.extend({
  didRender () {
    this._super(...arguments);
    console.log(this.$('.antiscroll-wrap'))
    this.$('.antiscroll-wrap').antiscroll({
      autoHide: false
    });
  }
});

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;
}

.container {
	height: 300px;
}

/*
 * Antiscroll: cross-browser native OS X Lion scrollbars
 * https://github.com/Automattic/antiscroll
 * v0.9
 */

.antiscroll-wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.antiscroll-scrollbar {
  background: gray;
  background: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-box-shadow: 0 0 1px #fff;
  -moz-box-shadow: 0 0 1px #fff;
  box-shadow: 0 0 1px #fff;
  position: absolute;
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  -webkit-transition: linear 300ms opacity;
  -moz-transition: linear 300ms opacity;
  -o-transition: linear 300ms opacity;
}

.antiscroll-scrollbar-shown {
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.antiscroll-scrollbar-horizontal {
  height: 7px;
  margin-left: 2px;
  bottom: 2px;
  left: 0;
}

.antiscroll-scrollbar-vertical {
  width: 7px;
  margin-top: 2px;
  right: 2px;
  top: 0;
}

.antiscroll-inner {
  overflow: scroll;
}

/** A bug in Chrome 25 on Lion requires each selector to have their own
    blocks. E.g. the following:
    .antiscroll-inner::-webkit-scrollbar, .antiscroll-inner::scrollbar {...}
    causes the width and height rules to be ignored by the browser resulting
    in both native and antiscroll scrollbars appearing at the same time.
 */
.antiscroll-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.antiscroll-inner::scrollbar {
  width: 0;
  height: 0;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
{{#anti-scroll}}
  <div class="container">
  <p>
  Benedict Arnold led an expedition early in the American Revolutionary War from Cambridge, Massachusetts, through the wilderness of what is now Maine to the gates of Quebec City, setting out on September 11, 1775. Colonel Arnold's force of 1,100 Continental Army troops was part of a two-pronged invasion of the British Province of Quebec, along with Richard Montgomery's expedition pushing north from Lake Champlain. By the time Arnold reached the French settlements above the Saint Lawrence River in November, his force was reduced to 600 starving men. They had traveled about 350 miles (560 km) through poorly charted wilderness, twice the distance they had expected to cover. Assisted by the local French-speaking Canadiens, Arnold's troops crossed the Saint Lawrence on November 13 and 14 and attempted to put Quebec City under siege. Failing in this, they withdrew until Montgomery arrived to lead an unsuccessful attack on the city. Arnold received a promotion to brigadier general. His route through northern Maine has been listed on the National Register of Historic Places as the Arnold Trail to Quebec.
  </p>

  <p>
  Because there had been little direct action at Boston after the Battle of Bunker Hill in June, many units stationed in the American camps besieging the town were bored with garrison life and eager for action.[15] Arnold selected a force of 750 men from the large number who expressed interest in the proposed expedition.[16] Most of these were divided into two battalions: one commanded by Lieutenant Colonel Roger Enos and the other by Lieutenant Colonel Christopher Greene. The rest were placed in a third battalion under Daniel Morgan that included three companies—250 men—of Continental riflemen from Virginia and the Pennsylvania Rifle Regiment.[17] These frontiersmen, from the Virginia and Pennsylvania wilderness, were better suited to wilderness combat than to a siege, and had been causing trouble since arriving outside Boston.[16] The entire force numbered about 1,100.[18] Among the volunteers were other men who rose to later prominence during and after the war, including Aaron Burr, Return J. Meigs, Henry Dearborn, and John Joseph Henry.[19]

  Washington and Arnold were concerned about Indian support for (or opposition to) the effort, as well as the reception Arnold's forces might receive from the Canadians once they arrived near the Saint Lawrence River. On August 30, Washington wrote to General Schuyler of a meeting he held with an Abenaki chief, "[The chief] says the Indians of Canada in general, and also the French, are greatly in our favor, and determined not to act against us."[20] Four Abenakis accompanied the expedition as scouts and guides.[21]
  </p>
  </div>
{{/anti-scroll}}

<br>
<br>
{{outlet}}
<br>
<br>

templates.components.anti-scroll.hbs

<div class="antiscroll-wrap">
	<div class="antiscroll-inner">
		{{yield}}
  </div>
</div>

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
        "antiscroll": "https://cdnjs.cloudflare.com/ajax/libs/antiscroll/0.9/antiscroll.min.js",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}