Add css rules on the App start

demo/multipleReloadTest/multipleReload.html

@@ -4,7 +4,7 @@
 	<meta charset="utf-8">
 	<title>Multiple reload test</title>
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
-	<script src="../../src/ui-scroll.js"></script>
+	<script src="../../dist/ui-scroll.js"></script>
 	<script src="multipleReload.js"></script>
 	<link rel="stylesheet" href="../css/style.css" type="text/css"/>
 </head>
@@ -17,12 +17,12 @@
 		<h1 class="page-header page-header-exapmle">Multiple reload test</h1>
 
 		<div class="actions">
-			<button ng-click="doSingleReload()"> Do single reload</button>
+			<button ng-click="show = !show"> Do single reload</button>
 			<button ng-click="doMultipleReload()"> Do multiple reload</button>
 			Loading: {{adapter.isLoading}}
 		</div>
 
-		<div class="viewport" id="viewport-scopeDatasource" ui-scroll-viewport>
+		<div class="viewport" id="viewport-scopeDatasource" ui-scroll-viewport ng-if="show">
 			<div class="item" ui-scroll="item in datasource" adapter="adapter">{{item}}</div>
 		</div>
 

src/modules/elementRoutines.js

@@ -1,21 +1,29 @@
 const hideClassToken = 'ng-ui-scroll-hide';
 
-function addCSSRule(sheet, selector, rules, index) {
-  if('insertRule' in sheet) {
-    sheet.insertRule(selector + '{' + rules + '}', index);
-  }
-  else if('addRule' in sheet) {
-    sheet.addRule(selector, rules, index);
-  }
-}
-
 export default class ElementRoutines {
 
+  static addCSSRules() {
+    const selector = '.' + hideClassToken;
+    const rules = 'display: none';
+    const sheet = document.styleSheets[0];
+    let index;
+    try {
+      index = sheet.cssRules.length;
+    } catch (err) {
+      index = 0;
+    }
+    if('insertRule' in sheet) {
+      sheet.insertRule(selector + '{' + rules + '}', index);
+    }
+    else if('addRule' in sheet) {
+      sheet.addRule(selector, rules, index);
+    }
+  }
+
   constructor($injector, $q) {
     this.$animate = ($injector.has && $injector.has('$animate')) ? $injector.get('$animate') : null;
     this.isAngularVersionLessThen1_3 = angular.version.major === 1 && angular.version.minor < 3;
     this.$q = $q;
-    addCSSRule(document.styleSheets[0], '.' + hideClassToken, 'display: none');
   }
 
   hideElement(wrapper) {

src/ui-scroll.js

@@ -7,9 +7,10 @@ import Adapter from './modules/adapter.js';
 angular.module('ui.scroll', [])
 
   .constant('JQLiteExtras', JQLiteExtras)
-  .run(['JQLiteExtras', (JQLiteExtras) =>
-    !window.jQuery ? (new JQLiteExtras()).registerFor(angular.element) : null
-  ])
+  .run(['JQLiteExtras', (JQLiteExtras) => {
+    !window.jQuery ? (new JQLiteExtras()).registerFor(angular.element) : null;
+    ElementRoutines.addCSSRules();
+  }])
 
   .directive('uiScrollViewport', function () {
     return {