how to disable background while using md dialog?

I am using angular material md dialog box on problem I am facing is backdrop is scrolling along with page. For that issue i have found a solution somewhere to keep md-backdrop position to fixed. It worked but another issue is background content scrolling under the backdrop.
Here is the link for pen with example:

https://codepen.io/avreddy/pen/KZzORN?editors=1000

(function(angular, undefined){
  "use strict";

  angular
    .module('demoApp', ['ngMaterial'])
    .controller('EmployeeController', EmployeeEditor)
    .controller('GreetingController', GreetingController);

  // Fictitious Employee Editor to show how to use simple and complex dialogs.

  function EmployeeEditor($scope, $mdDialog) {
    var alert;

    $scope.showAlert = showAlert;
    $scope.closeAlert = closeAlert;
    $scope.showGreeting = showCustomGreeting;

    $scope.hasAlert = function() { return !!alert };
    $scope.userName = $scope.userName || 'Bobby';

    // Dialog #1 - Show simple alert dialog and cache
    // reference to dialog instance

    function showAlert() {
      alert = $mdDialog.alert()
        .title('Attention, ' + $scope.userName)
        .content('This is an example of how easy dialogs can be!')
        .ok('Close');

      $mdDialog
          .show( alert )
          .finally(function() {
            alert = undefined;
          });
    }

    // Close the specified dialog instance and resolve with 'finished' flag
    // Normally this is not needed, just use '$mdDialog.hide()' to close
    // the most recent dialog popup.

    function closeAlert() {
      $mdDialog.hide( alert, "finished" );
      alert = undefined;
    }

    // Dialog #2 - Demonstrate more complex dialogs construction and popup.

    function showCustomGreeting($event) {
        $mdDialog.show({
          targetEvent: $event,
          template:
            '<md-dialog>' +
            '  <md-content>Hello {{ employee }}!</md-content>' +
            '  <div class="md-actions">' +
            '    <md-button ng-click="closeDialog()">' +
            '      Close Greeting' +
            '    </md-button>' +
            '  </div>' +
            '</md-dialog>',
          controller: 'GreetingController',
          onComplete: afterShowAnimation,
          locals: { employee: $scope.userName }
        });

        // When the 'enter' animation finishes...

        function afterShowAnimation(scope, element, options) {
           // post-show code here: DOM element focus, etc.
        }
    }
  }

  // Greeting controller used with the more complex 'showCustomGreeting()' custom dialog

  function GreetingController($scope, $mdDialog, employee) {
    // Assigned from construction <code>locals</code> options...
    $scope.employee = employee;

    $scope.closeDialog = function() {
      // Easily hides most recent dialog shown...
      // no specific instance reference is needed.
      $mdDialog.hide();
    };
  }
  
})(angular);

body {
  padding:100px;
}
.md-button {
  margin-left:50px;
  text-transform: none;
  padding:10px;
  padding-left:15px;
  padding-right:15px;
  
}

.intro {
 
  padding-left:75px;
  width:520px;
}
md-backdrop{
  position: fixed !important;
}

<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
  <div  ng-app="demoApp" ng-controller="EmployeeController">
  <md-button ng-click="showAlert()" class="md-raised md-warn">
    Employee Alert!
  </md-button>
  <md-button ng-click="closeAlert()" ng-disabled="!hasAlert()" class="md-raised">
    Close Alert
  </md-button>
  <md-button class="md-raised md-primary" ng-click="showGreeting($event)">
    Greet Employee 
  </md-button>
</div>
<p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p>
<p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs:
</p><p class="intro">
This demo highlights how the $mdDialog service can be used to easily show and hide both simple and complex dialogs
</p>
<br/>
<br/>

<div  ng-app="demoApp" ng-controller="EmployeeController">
  <md-button ng-click="showAlert()" class="md-raised md-warn">
    Employee Alert!
  </md-button>
  <md-button ng-click="closeAlert()" ng-disabled="!hasAlert()" class="md-raised">
    Close Alert
  </md-button>
  <md-button class="md-raised md-primary" ng-click="showGreeting($event)">
    Greet Employee 
  </md-button>
</div>    
  </body>

Solution

If you are okay with upgrading to angular 1.5.5 and angular material to 1.1.5, you can achieve this automatically.

You can even set parent property to make which area should be back-dropped. Please check https://material.angularjs.org/latest/demo/dialog

UPDATES If you want temporary solution try this. before showing dialog, add angular.element(document.querySelector('body')).attr('style', 'overflow-y: hidden');

and in finally add

angular.element(document.querySelector('body')).attr('style', 'overflow-y: auto');

Your code for showAlert function should look like this.

function showAlert() {
      angular.element(document.querySelector('body')).attr('style', 'overflow-y: hidden');
      alert = $mdDialog.alert()
        .title('Attention, ' + $scope.userName)
        .content('This is an example of how easy dialogs can be!')
        .ok('Close');

      $mdDialog
          .show( alert )
          .finally(function() {
            angular.element(document.querySelector('body')).attr('style', 'overflow-y: auto');
          });
    }