scroll-container.html

<script type=module>
  import html from 'https://crocdn.com/_plugins/html.js'

  customElements.define(
    'scroll-container',
    class ScrollContainer extends HTMLElement {
      constructor() {
        super()

        this.updateOverflowAttribute = this.updateOverflowAttribute.bind(this)
      }

      get overflow() {
        return this.getAttribute('overflow')
      }

      set overflow(string) {
        return this.setAttribute('overflow', string)
      }

      updateOverflowAttribute() {
        return this.overflow = Object.entries({
          top: tag => tag.scrollTop > 0,
          right: tag => tag.scrollLeft + tag.offsetWidth < tag.scrollWidth,
          bottom: tag => tag.scrollTop + tag.offsetHeight < tag.scrollHeight,
          left: tag => tag.scrollLeft > 0
        })
          .filter(([name, test]) => test(this.shadowRoot.querySelector('scroll-content')))
          .map(([name]) => name)
          .join(' ')
      }

      connectedCallback() {
        const shadow = this.attachShadow({mode: 'open'})
        this.scrollContent = document.createElement('scroll-content')

        this.scrollContent.append(
          html`${this.childNodes}`
        )

        shadow.append(
          html`
            ${this.scrollContent}
            <scroll-shadow class=top></scroll-shadow>
            <scroll-shadow class=right></scroll-shadow>
            <scroll-shadow class=bottom></scroll-shadow>
            <scroll-shadow class=left></scroll-shadow>
            <style>
              :host {
                --shadow-width: 30px;
                --gradient-start: rgba(0, 0, 0, .2);
                --gradient-end: rgba(0, 0, 0, 0);
                display: block;
                width: auto;
                position: relative;
              }
              :host scroll-content {
                display: block;
                max-width: 100%;
                max-height: 100%;
                overflow: scroll;
              }
              :host scroll-shadow {
                pointer-events: none;
                display: block;
                position: absolute;
                z-index: 1;
                opacity: 0;
                transition: opacity .2s ease-in-out;
              }
              :host([overflow~="top"]) scroll-shadow.top,
              :host([overflow~="bottom"]) scroll-shadow.bottom,
              :host([overflow~="left"]) scroll-shadow.left,
              :host([overflow~="right"]) scroll-shadow.right {
                opacity: 1;
              }
              :host scroll-shadow.top,
              :host scroll-shadow.bottom {
                width: 100%;
                height: var(--shadow-width);
                left: 0;
              }
              :host scroll-shadow.left,
              :host scroll-shadow.right {
                height: 100%;
                width: var(--shadow-width);
                top: 0;
              }
              :host scroll-shadow.top {
                top: 0;
                background-image: linear-gradient(
                  to bottom,
                  var(--gradient-start),
                  var(--gradient-end)
                );
              }
              :host scroll-shadow.bottom {
                bottom: 0;
                background-image: linear-gradient(
                  to top,
                  var(--gradient-start),
                  var(--gradient-end)
                );
              }
              :host scroll-shadow.left {
                left: 0;
                background-image: linear-gradient(
                  to right,
                  var(--gradient-start),
                  var(--gradient-end)
                );
              }
              :host scroll-shadow.right {
                right: 0;
                background-image: linear-gradient(
                  to left,
                  var(--gradient-start),
                  var(--gradient-end)
                );
              }
            </style>
          `
        )

        this.scrollContent.addEventListener('scroll', this.updateOverflowAttribute)
        this.scrollContent.dispatchEvent(new Event('scroll'))
      }

      disconnectedCallback() {
        this.scrollContent.remove('scroll', this.updateOverflowAttribute)
      }
    }
  )
</script>

<scroll-container><!-- empty --></scroll-container>

<scroll-container>(basically empty)</scroll-container>

<scroll-container style="
  width: 300px;
  height: 300px;
  font-size: 20pt;
  margin: 1em;
">
  <p style="width: 600px;">Curabitur at felis id metus laoreet dignissim eget vel diam. Mauris at diam sed sapien bibendum ullamcorper. Vestibulum ultricies aliquet ligula, a pretium nulla suscipit sit amet. Sed eget pharetra metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla in lacus iaculis, dictum libero quis, aliquet metus. Nullam pharetra feugiat massa id fringilla. Curabitur interdum egestas gravida. Curabitur posuere elit non faucibus accumsan. Ut commodo malesuada lorem a semper. Proin sit amet nunc sit amet tellus lacinia finibus id at leo. Maecenas porttitor tortor quis nisi posuere dictum. Etiam aliquet, neque sed pharetra volutpat, mi quam iaculis metus, molestie porta lacus sapien non dolor.</p>
</scroll-container>

<scroll-container style="
  width: 300px;
  height: 300px;
  font-size: 20pt;
  --shadow-width: 33%;
  --gradient-start: black;
  --gradient-end: transparent;
  margin: 1em;
">
  <p style="width: 600px;">Curabitur at felis id metus laoreet dignissim eget vel diam. Mauris at diam sed sapien bibendum ullamcorper. Vestibulum ultricies aliquet ligula, a pretium nulla suscipit sit amet. Sed eget pharetra metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla in lacus iaculis, dictum libero quis, aliquet metus. Nullam pharetra feugiat massa id fringilla. Curabitur interdum egestas gravida. Curabitur posuere elit non faucibus accumsan. Ut commodo malesuada lorem a semper. Proin sit amet nunc sit amet tellus lacinia finibus id at leo. Maecenas porttitor tortor quis nisi posuere dictum. Etiam aliquet, neque sed pharetra volutpat, mi quam iaculis metus, molestie porta lacus sapien non dolor.</p>
</scroll-container>

<scroll-container style="
  width: 300px;
  height: 300px;
  font-size: 20pt;
  --shadow-width: 10px;
  --gradient-start: rgba(0, 0, 0, .5);
  margin: 1em;
">
  <p style="width: 600px;">Curabitur at felis id metus laoreet dignissim eget vel diam. Mauris at diam sed sapien bibendum ullamcorper. Vestibulum ultricies aliquet ligula, a pretium nulla suscipit sit amet. Sed eget pharetra metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla in lacus iaculis, dictum libero quis, aliquet metus. Nullam pharetra feugiat massa id fringilla. Curabitur interdum egestas gravida. Curabitur posuere elit non faucibus accumsan. Ut commodo malesuada lorem a semper. Proin sit amet nunc sit amet tellus lacinia finibus id at leo. Maecenas porttitor tortor quis nisi posuere dictum. Etiam aliquet, neque sed pharetra volutpat, mi quam iaculis metus, molestie porta lacus sapien non dolor.</p>
</scroll-container>

<scroll-container style="
  width: 300px;
  height: 300px;
  font-size: 20pt;
  --shadow-width: 25%;
  --gradient-start: red;
  margin: 1em;
  background: red;
  color: white;
">
  <p style="width: 600px;">Curabitur at felis id metus laoreet dignissim eget vel diam. Mauris at diam sed sapien bibendum ullamcorper. Vestibulum ultricies aliquet ligula, a pretium nulla suscipit sit amet. Sed eget pharetra metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla in lacus iaculis, dictum libero quis, aliquet metus. Nullam pharetra feugiat massa id fringilla. Curabitur interdum egestas gravida. Curabitur posuere elit non faucibus accumsan. Ut commodo malesuada lorem a semper. Proin sit amet nunc sit amet tellus lacinia finibus id at leo. Maecenas porttitor tortor quis nisi posuere dictum. Etiam aliquet, neque sed pharetra volutpat, mi quam iaculis metus, molestie porta lacus sapien non dolor.</p>
</scroll-container>