Hide a vertical scrollbar with CSS and an Angular directive

<!DOCTYPE html>
<html ng-app="noScrollbarApp">

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="no-scrollbar-wrap">
      <div class="no-scrollbar">
        <div class="back">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="front">
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>2</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
          <p>1</p>
        </div>
      </div>
    </div>
    
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  
    <script src="script.js"></script>
  </body>

</html>

(function () {

    'use strict';

    var app = angular.module('noScrollbarApp', []);
      console.log('asdf1');
    app.directive('noScrollbar', ['$rootScope',
      function ($rootScope) {

        return {
            restrict: 'C',
            link: function (scope, element, attrs) {
                // Get scrollbar width if necessary
                if (!$rootScope.scrollbarWidth) {
                    var scrollDiv = document.createElement("div");
                    scrollDiv.className = "scrollbar-measurer";
                    document.body.appendChild(scrollDiv);
                    $rootScope.scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
                    document.body.removeChild(scrollDiv);
                }
                
                // Add padding to the right side
                element.css('padding-right', parseInt(element.css('padding-right')) + $rootScope.scrollbarWidth);
            }
        };

      }
		]);

})();

.scrollbar-measurer {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}   

html, body {
  margin: 0;
  padding: 0;
}

.no-scrollbar-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  /* OR */
  
  /* width: 100%;
  height: 250px; */
  
  overflow: hidden;
}

.no-scrollbar {
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  /* Padding the width of the scrollbar will be added to the right */
  box-sizing: content-box;
}

.back {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.back div {
  width: 100%;
  height: 50px;
  border-bottom: solid 1px red;
}

.front {
  position: absolute;
  top: 0;
  width: 100%;
  
  color: #fff;
  background: rgba(0, 0, 0, .8);
}