detect-scrollbar-behavior.html

<!-- https://davidwalsh.name/detect-scrollbar-width -->
<style>
  :root .scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
  }
</style>

<script>
  var saulis = window.saulis || {};
  
  /**
   * Use `DetectScrollBarBehavior` to detect scrollbar width.
   *
   * @polymerBehavior
   */
  saulis.DetectScrollBarBehavior = {
    properties: {
      /**
       * Automatically detected scroll bar width in px.
       */
      scrollBarWidth: {
        type: Number,
        value: 0
      }
    },

    // registered would be optimal but this doesn't seem to work at that stage.
    ready: function() {
      var scrollDiv = document.createElement("div");
      scrollDiv.className = "scrollbar-measure";
      document.body.appendChild(scrollDiv);

      // Get the scrollbar width
      this.scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;

      // Delete the DIV
      document.body.removeChild(scrollDiv);
    },
  };
</script>