[new-theme | Library]: section-scroll component changed to another effect. (not finalized)

utils/section-scroll/section-scroll.component.css

@@ -1,10 +1,44 @@
-/* hide scrollbar but allow scrolling */
-*[scroll] {
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
-  scrollbar-width: none; /* for Firefox */
-  overflow-y: scroll;
+.section {
+    position: relative;
+    height: auto;
+    /*display: flex;*/
 }
 
-*[scroll]::-webkit-scrollbar {
-  display: none; /* for Chrome, Safari, and Opera */
+.section [top] {
+    /*height: 80vh;*/
+    /*border: 1px solid rebeccapurple;*/
+}
+
+.section [top] {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    height: auto;
+    /*max-height: 80vh;*/
+    /*border: 1px solid deeppink;*/
+}
+
+/*.content {*/
+/*    position: relative;*/
+/*    height: auto;*/
+/*    z-index: 1;*/
+/*    border: 1px solid cyan;*/
+/*}*/
+
+[left] {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    /*border: 1px solid red;*/
+}
+
+[left] img {
+    /*position: absolute;*/
+    /*top: 50%;*/
+    /*left: 50%;*/
+    /*transform: translate(-50%, -50%);*/
+    position: sticky;
+    top: 50%;
+    left: 10%;
+    /*border: 1px solid greenyellow;*/
 }

utils/section-scroll/section-scroll.component.ts

@@ -11,10 +11,21 @@ import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angula
 @Component({
   selector: 'section-scroll',
   template: `
-    <div class="uk-grid" style="align-items: self-start" [ngClass]="customClass">
-      <ng-content select="[fixed]"></ng-content>
+
+<!--&lt;!&ndash;alternative&ndash;&gt;-->
+<!--<div class="section" [ngClass]="customClass">-->
+<!--  <ng-content select="[top]"></ng-content>-->
+<!--  <div class="uk-grid content"  [ngClass]="childrenCustomClass">-->
+<!--    <ng-content select="[left]"></ng-content>-->
+<!--    <ng-content select="[scroll]"></ng-content>-->
+<!--  </div>-->
+<!--</div>-->
+
+<div class="section uk-grid" [ngClass]="customClass">
+  <ng-content select="[top]"></ng-content>
+    <ng-content select="[left]"></ng-content>
     <ng-content select="[scroll]"></ng-content>
-    </div>
+</div>
   `,
   styleUrls: ['section-scroll.component.css'],
   encapsulation: ViewEncapsulation.None
@@ -23,7 +34,9 @@ export class SectionScrollComponent implements OnInit {
   
   @Input()
   public customClass = null;
-  private fixed: HTMLElement;
+  @Input()
+  public childrenCustomClass = null;
+  private absolute: HTMLCollectionOf<Element>;
   private scroll: HTMLElement;
   
   constructor() {
@@ -31,23 +44,26 @@ export class SectionScrollComponent implements OnInit {
   
   @HostListener('window:resize', ['$event'])
   onResize(event) {
-    this.setHeight();
+    //this.setHeight();
   }
   
   
   ngOnInit() {
-    this.setHeight();
+    //this.setHeight();
   }
 
   setHeight() {
     if(typeof document !== "undefined") {
-      this.fixed = document.querySelector('[fixed]');
+      // this.absolute = document.querySelector('[absolute]');
+      this.absolute = document.getElementsByClassName('absolute');
       this.scroll = document.querySelector('[scroll]');
       this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
+
     }
   }
   
   get height():number {
-    return this.fixed?this.fixed.offsetHeight:0;
+    let htmlElement = this.absolute&&this.absolute.length>0?this.absolute[0]:null;
+    return htmlElement?htmlElement['offsetHeight']:0;
   }
 }