scrolling-view-table.component.html

<div class="framed" #container>
  <div class="columnify" contents [scrollingView]="container" >
    <!-- Body -->
    <div>
      <div [contentsSection]="'section-one'">
        <h1>Section One</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt libero leo. Nunc in urna libero. Morbi quam sem, tempor quis sollicitudin ut, congue vitae enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sit amet ex quis lorem tempus sodales. Mauris eget quam eget lacus vulputate egestas sed non tortor. Ut aliquam nulla ut turpis accumsan, et blandit nulla feugiat. Donec neque risus, ornare posuere imperdiet ut, auctor et magna. Ut justo sem, tempus sit amet risus at, efficitur sodales nulla. Quisque et nibh lacinia, gravida metus ac, scelerisque nisi.</p>
        <p>Ut tristique odio commodo nunc placerat, id scelerisque ante vulputate. Sed ac ornare massa. Donec placerat elit quis nulla porttitor pulvinar. Maecenas id leo feugiat, pulvinar augue ac, tempus velit. Duis at facilisis nunc. Curabitur dolor felis, ultricies eu porta ac, eleifend vitae tortor. Curabitur ac volutpat risus, ut vehicula risus. Vivamus elit lectus, eleifend id est in, pulvinar tempor quam. Nam in sem ligula. Integer efficitur lacus in massa laoreet faucibus.</p>
        <p>Fusce vitae elit ac massa feugiat porttitor. Aliquam pulvinar viverra erat. Nulla facilisi. Duis molestie mauris urna, a gravida lectus gravida ac. Vestibulum blandit orci non lobortis tincidunt. Donec non laoreet risus, lobortis ultricies sem. Nam auctor euismod urna, efficitur fermentum purus ullamcorper commodo. Duis venenatis nisl consequat consectetur porta.</p>
        <p>Curabitur eget nisi at lacus fermentum viverra eu at metus. Nunc rhoncus euismod purus, non rhoncus odio viverra non. Curabitur iaculis eleifend elit vitae consequat. Fusce eu lorem nisl. Vestibulum eu ultrices arcu. Vivamus non volutpat orci. Morbi sed odio ante. Curabitur sit amet nunc vulputate, dapibus quam pellentesque, semper nisi. Nam mattis id felis ac dictum.</p>
        <p>Donec quam sapien, venenatis vitae bibendum eget, condimentum a est. Nullam dignissim dolor diam, vel convallis erat viverra non. Aliquam dictum feugiat porta. Donec pulvinar dui non neque placerat tempus. Morbi rhoncus tortor a ligula dignissim, at vestibulum ex semper. Curabitur tincidunt, dui at maximus bibendum, neque urna suscipit nunc, ut tincidunt tellus erat ut augue. Vestibulum a blandit leo. Nunc tellus dui, tempor sit amet lacinia ut, cursus ac dui. Nulla sed sem arcu. Mauris eu nisl vitae purus elementum euismod sit amet gravida velit. Mauris eu justo et ex convallis cursus. Suspendisse et odio porta, tempus sapien eu, pretium tellus. Donec non maximus odio.</p>
      </div>
  
      <div [contentsSection]="'section-two'">
        <h1>Section Two</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt libero leo. Nunc in urna libero. Morbi quam sem, tempor quis sollicitudin ut, congue vitae enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sit amet ex quis lorem tempus sodales. Mauris eget quam eget lacus vulputate egestas sed non tortor. Ut aliquam nulla ut turpis accumsan, et blandit nulla feugiat. Donec neque risus, ornare posuere imperdiet ut, auctor et magna. Ut justo sem, tempus sit amet risus at, efficitur sodales nulla. Quisque et nibh lacinia, gravida metus ac, scelerisque nisi.</p>
        <p>Ut tristique odio commodo nunc placerat, id scelerisque ante vulputate. Sed ac ornare massa. Donec placerat elit quis nulla porttitor pulvinar. Maecenas id leo feugiat, pulvinar augue ac, tempus velit. Duis at facilisis nunc. Curabitur dolor felis, ultricies eu porta ac, eleifend vitae tortor. Curabitur ac volutpat risus, ut vehicula risus. Vivamus elit lectus, eleifend id est in, pulvinar tempor quam. Nam in sem ligula. Integer efficitur lacus in massa laoreet faucibus.</p>
        <p>Fusce vitae elit ac massa feugiat porttitor. Aliquam pulvinar viverra erat. Nulla facilisi. Duis molestie mauris urna, a gravida lectus gravida ac. Vestibulum blandit orci non lobortis tincidunt. Donec non laoreet risus, lobortis ultricies sem. Nam auctor euismod urna, efficitur fermentum purus ullamcorper commodo. Duis venenatis nisl consequat consectetur porta.</p>
        <p>Curabitur eget nisi at lacus fermentum viverra eu at metus. Nunc rhoncus euismod purus, non rhoncus odio viverra non. Curabitur iaculis eleifend elit vitae consequat. Fusce eu lorem nisl. Vestibulum eu ultrices arcu. Vivamus non volutpat orci. Morbi sed odio ante. Curabitur sit amet nunc vulputate, dapibus quam pellentesque, semper nisi. Nam mattis id felis ac dictum.</p>
        <p>Donec quam sapien, venenatis vitae bibendum eget, condimentum a est. Nullam dignissim dolor diam, vel convallis erat viverra non. Aliquam dictum feugiat porta. Donec pulvinar dui non neque placerat tempus. Morbi rhoncus tortor a ligula dignissim, at vestibulum ex semper. Curabitur tincidunt, dui at maximus bibendum, neque urna suscipit nunc, ut tincidunt tellus erat ut augue. Vestibulum a blandit leo. Nunc tellus dui, tempor sit amet lacinia ut, cursus ac dui. Nulla sed sem arcu. Mauris eu nisl vitae purus elementum euismod sit amet gravida velit. Mauris eu justo et ex convallis cursus. Suspendisse et odio porta, tempus sapien eu, pretium tellus. Donec non maximus odio.</p>
      </div>
  
      <div [contentsSection]="'section-three'">
        <h1>Section Three</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt libero leo. Nunc in urna libero. Morbi quam sem, tempor quis sollicitudin ut, congue vitae enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sit amet ex quis lorem tempus sodales. Mauris eget quam eget lacus vulputate egestas sed non tortor. Ut aliquam nulla ut turpis accumsan, et blandit nulla feugiat. Donec neque risus, ornare posuere imperdiet ut, auctor et magna. Ut justo sem, tempus sit amet risus at, efficitur sodales nulla. Quisque et nibh lacinia, gravida metus ac, scelerisque nisi.</p>
        <p>Ut tristique odio commodo nunc placerat, id scelerisque ante vulputate. Sed ac ornare massa. Donec placerat elit quis nulla porttitor pulvinar. Maecenas id leo feugiat, pulvinar augue ac, tempus velit. Duis at facilisis nunc. Curabitur dolor felis, ultricies eu porta ac, eleifend vitae tortor. Curabitur ac volutpat risus, ut vehicula risus. Vivamus elit lectus, eleifend id est in, pulvinar tempor quam. Nam in sem ligula. Integer efficitur lacus in massa laoreet faucibus.</p>
        <p>Fusce vitae elit ac massa feugiat porttitor. Aliquam pulvinar viverra erat. Nulla facilisi. Duis molestie mauris urna, a gravida lectus gravida ac. Vestibulum blandit orci non lobortis tincidunt. Donec non laoreet risus, lobortis ultricies sem. Nam auctor euismod urna, efficitur fermentum purus ullamcorper commodo. Duis venenatis nisl consequat consectetur porta.</p>
        <p>Curabitur eget nisi at lacus fermentum viverra eu at metus. Nunc rhoncus euismod purus, non rhoncus odio viverra non. Curabitur iaculis eleifend elit vitae consequat. Fusce eu lorem nisl. Vestibulum eu ultrices arcu. Vivamus non volutpat orci. Morbi sed odio ante. Curabitur sit amet nunc vulputate, dapibus quam pellentesque, semper nisi. Nam mattis id felis ac dictum.</p>
        <p>Donec quam sapien, venenatis vitae bibendum eget, condimentum a est. Nullam dignissim dolor diam, vel convallis erat viverra non. Aliquam dictum feugiat porta. Donec pulvinar dui non neque placerat tempus. Morbi rhoncus tortor a ligula dignissim, at vestibulum ex semper. Curabitur tincidunt, dui at maximus bibendum, neque urna suscipit nunc, ut tincidunt tellus erat ut augue. Vestibulum a blandit leo. Nunc tellus dui, tempor sit amet lacinia ut, cursus ac dui. Nulla sed sem arcu. Mauris eu nisl vitae purus elementum euismod sit amet gravida velit. Mauris eu justo et ex convallis cursus. Suspendisse et odio porta, tempus sapien eu, pretium tellus. Donec non maximus odio.</p>
      </div>
  
      <div [contentsSection]="'section-four'">
        <h1>Section Four</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt libero leo. Nunc in urna libero. Morbi quam sem, tempor quis sollicitudin ut, congue vitae enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sit amet ex quis lorem tempus sodales. Mauris eget quam eget lacus vulputate egestas sed non tortor. Ut aliquam nulla ut turpis accumsan, et blandit nulla feugiat. Donec neque risus, ornare posuere imperdiet ut, auctor et magna. Ut justo sem, tempus sit amet risus at, efficitur sodales nulla. Quisque et nibh lacinia, gravida metus ac, scelerisque nisi.</p>
        <p>Ut tristique odio commodo nunc placerat, id scelerisque ante vulputate. Sed ac ornare massa. Donec placerat elit quis nulla porttitor pulvinar. Maecenas id leo feugiat, pulvinar augue ac, tempus velit. Duis at facilisis nunc. Curabitur dolor felis, ultricies eu porta ac, eleifend vitae tortor. Curabitur ac volutpat risus, ut vehicula risus. Vivamus elit lectus, eleifend id est in, pulvinar tempor quam. Nam in sem ligula. Integer efficitur lacus in massa laoreet faucibus.</p>
        <p>Fusce vitae elit ac massa feugiat porttitor. Aliquam pulvinar viverra erat. Nulla facilisi. Duis molestie mauris urna, a gravida lectus gravida ac. Vestibulum blandit orci non lobortis tincidunt. Donec non laoreet risus, lobortis ultricies sem. Nam auctor euismod urna, efficitur fermentum purus ullamcorper commodo. Duis venenatis nisl consequat consectetur porta.</p>
        <p>Curabitur eget nisi at lacus fermentum viverra eu at metus. Nunc rhoncus euismod purus, non rhoncus odio viverra non. Curabitur iaculis eleifend elit vitae consequat. Fusce eu lorem nisl. Vestibulum eu ultrices arcu. Vivamus non volutpat orci. Morbi sed odio ante. Curabitur sit amet nunc vulputate, dapibus quam pellentesque, semper nisi. Nam mattis id felis ac dictum.</p>
        <p>Donec quam sapien, venenatis vitae bibendum eget, condimentum a est. Nullam dignissim dolor diam, vel convallis erat viverra non. Aliquam dictum feugiat porta. Donec pulvinar dui non neque placerat tempus. Morbi rhoncus tortor a ligula dignissim, at vestibulum ex semper. Curabitur tincidunt, dui at maximus bibendum, neque urna suscipit nunc, ut tincidunt tellus erat ut augue. Vestibulum a blandit leo. Nunc tellus dui, tempor sit amet lacinia ut, cursus ac dui. Nulla sed sem arcu. Mauris eu nisl vitae purus elementum euismod sit amet gravida velit. Mauris eu justo et ex convallis cursus. Suspendisse et odio porta, tempus sapien eu, pretium tellus. Donec non maximus odio.</p>
      </div>
  
      
      <div [contentsSection]="'section-five'">
        <h1>Section Five</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt libero leo. Nunc in urna libero. Morbi quam sem, tempor quis sollicitudin ut, congue vitae enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sit amet ex quis lorem tempus sodales. Mauris eget quam eget lacus vulputate egestas sed non tortor. Ut aliquam nulla ut turpis accumsan, et blandit nulla feugiat. Donec neque risus, ornare posuere imperdiet ut, auctor et magna. Ut justo sem, tempus sit amet risus at, efficitur sodales nulla. Quisque et nibh lacinia, gravida metus ac, scelerisque nisi.</p>
        <p>Ut tristique odio commodo nunc placerat, id scelerisque ante vulputate. Sed ac ornare massa. Donec placerat elit quis nulla porttitor pulvinar. Maecenas id leo feugiat, pulvinar augue ac, tempus velit. Duis at facilisis nunc. Curabitur dolor felis, ultricies eu porta ac, eleifend vitae tortor. Curabitur ac volutpat risus, ut vehicula risus. Vivamus elit lectus, eleifend id est in, pulvinar tempor quam. Nam in sem ligula. Integer efficitur lacus in massa laoreet faucibus.</p>
        <p>Fusce vitae elit ac massa feugiat porttitor. Aliquam pulvinar viverra erat. Nulla facilisi. Duis molestie mauris urna, a gravida lectus gravida ac. Vestibulum blandit orci non lobortis tincidunt. Donec non laoreet risus, lobortis ultricies sem. Nam auctor euismod urna, efficitur fermentum purus ullamcorper commodo. Duis venenatis nisl consequat consectetur porta.</p>
        <p>Curabitur eget nisi at lacus fermentum viverra eu at metus. Nunc rhoncus euismod purus, non rhoncus odio viverra non. Curabitur iaculis eleifend elit vitae consequat. Fusce eu lorem nisl. Vestibulum eu ultrices arcu. Vivamus non volutpat orci. Morbi sed odio ante. Curabitur sit amet nunc vulputate, dapibus quam pellentesque, semper nisi. Nam mattis id felis ac dictum.</p>
        <p>Donec quam sapien, venenatis vitae bibendum eget, condimentum a est. Nullam dignissim dolor diam, vel convallis erat viverra non. Aliquam dictum feugiat porta. Donec pulvinar dui non neque placerat tempus. Morbi rhoncus tortor a ligula dignissim, at vestibulum ex semper. Curabitur tincidunt, dui at maximus bibendum, neque urna suscipit nunc, ut tincidunt tellus erat ut augue. Vestibulum a blandit leo. Nunc tellus dui, tempor sit amet lacinia ut, cursus ac dui. Nulla sed sem arcu. Mauris eu nisl vitae purus elementum euismod sit amet gravida velit. Mauris eu justo et ex convallis cursus. Suspendisse et odio porta, tempus sapien eu, pretium tellus. Donec non maximus odio.</p>
      </div>
    </div>
  
    <!-- Table of Contents -->
    <div class="table-column">
      <ul class="contents-table" contentsTable [scrollingView]="container">
        <li><a href="#section-one" contentsLink (click)="animateScroll('#section-one')">Section One</a></li>
        <li><a href="#section-two" contentsLink (click)="animateScroll('#section-two')">Section Two</a></li>
        <li><a href="#section-three" contentsLink (click)="animateScroll('#section-three')">Section Three</a></li>
        <li><a href="#section-four" contentsLink (click)="animateScroll('#section-four')">Section Four</a></li>
        <li><a href="#section-five" contentsLink (click)="animateScroll('#section-five')">Section Five</a></li>
      </ul>
    </div>
  </div>

  <div class="blank center">
    <div>
      <p>The end.</p>
      <i>This space was intentionally left blank.</i>
    </div>
  </div>
</div>