<routeroutlet>のAngular4で - メイン/ディテールコンテナのスクロールで、サイドバーまたは左divのナビゲーション/スクロールを制御する方法

Question

メイン/ディテールコンテナ（div）のスクロール時、サイドバーのナビゲーション/スクロールを制御する方法または左div。ディヴィジョンには別にスクロールがありませんが。 divへのスクロールを適用したくないので、私はdivでないメインウィンドウのスクロールでこの動作を制御したいと思います。詳細は下記をご覧ください。

1. 私はBootstrap "container-Fluid"で試してみましたが、予期しない結果が得られませんでした。
2. Angularディレクティブを使用してスクロールスクロールするよりも移動しました。しかし、私はウィンドウをスクロールするときにスクロールイベントを見ることができませんが、右のdivをスクロールするとスクロールイベントが発生します。代わりにスクロールで明示的にdivを使用したくないので使用したくありませんメインのルータ - アウトレットスクロールを使用します。

ここで問題は、どのようにオフセットを設定し、どのセクションにあるのかを判断し、それに対応してleft divのポインタまたはスクロールを移動することです。 （私の質問では、固定サイズのdivを使用していますが、元のコードではサイズは固定されていません。識別子は左側のカテゴリセクションと一致するセクション開始のIDです）。次に、DOCUMENTコンポーネントをディレクティブで使用し、左側のカテゴリメニューの各要素を強調表示する方法を説明します。

角度指令 - >

import { Component, Inject, OnInit } from "@angular/core"; 
 
import { DOCUMENT } from '@angular/platform-browser'; 
 
import {Directive, HostListener} from '@angular/core'; 
 
@Directive({ 
 
    selector:'[scroller]' 
 
}) 
 

 
export class ScrollingDirective{ 
 
    public navIsFixed: boolean = false; 
 
    constructor(@Inject(DOCUMENT) private document: Document) { } 
 
    @HostListener('scroll') scrolling() { 
 
     console.log('Scrolled1...'); 
 
     
 
    } 
 

 
    @HostListener("window:scroll", []) 
 
    onWindowScroll() { 
 
     console.log('Scrolled2...'); 
 
    } 
 
}

enter image description here HTMLページ - いくつかの後>

<style> 
 
    .full-width{ 
 
    width: 100%; 
 
    height: 50%; 
 
} 
 

 
    .double-width{ 
 
    width:100%; 
 
    height: 50%; 
 
} 
 
    #section1 { 
 
     color: #fff; 
 
     background-color: #1E88E5; 
 
    } 
 

 
    #section2 { 
 
     color: #fff; 
 
     background-color: #673ab7; 
 
    } 
 

 
    #section3 { 
 
     color: #fff; 
 
     background-color: #ff9800; 
 
    } 
 

 
    #section41 { 
 
     color: #fff; 
 
     background-color: #00bcd4; 
 
    } 
 

 
    #section42 { 
 
     color: #fff; 
 
     background-color: #009688; 
 
    } 
 

 
    @media screen and (max-width: 810px) { 
 
     #section1, #section2, #section3, #section41, #section42 { 
 
      margin-left: 150px; 
 
     } 
 
    } 
 
</style>

<div class="full-width" scroller> 
 
    <div class="double-width"> 
 
    <div data-spy="scroll" data-target="#myScrollspy" data-offset="20" scroller> 
 
    <div class="container" scroller> 
 
     <div class="row"> 
 
      <nav class="col-sm-3" id="myScrollspy"> 
 
       <ul class="nav nav-pills nav-stacked" scroller> 
 
        <li class="active"><a href="#section1">Section 1</a></li> 
 
        <li><a href="#section2">Section 2</a></li> 
 
        <li><a href="#section3">Section 3</a></li> 
 
        <li class="dropdown"> 
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
 
         <ul class="dropdown-menu"> 
 
          <li><a href="#section41">Section 4-1</a></li> 
 
          <li><a href="#section42">Section 4-2</a></li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
      <div class="col-sm-9"> 
 
       <div id="section1"> 
 
        <h1>Section 1</h1> 
 
        <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
 
       </div> 
 
       <div id="section2"> 
 
        <h1>Section 2</h1> 
 
        <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
 
       </div> 
 
       <div id="section3"> 
 
        <h1>Section 3</h1> 
 
        <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
 
       </div> 
 
       <div id="section41"> 
 
        <h1>Section 4-1</h1> 
 
        <p>Try to scroll this section and look at the navigation list while scrolling!</p> 
 
       </div> 
 
       <div id="section42"> 
 
        <h1>Section 4-2</h1> 
 
        <p>Try to scroll this section and look at the navigation 
 
          list while scrolling!</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>  
 
</div> 
 
</div>

Answer 1

試行錯誤のアプローチで決めると、私は解決策に達し、すべてのブラウザでうまく動作します。クロムとエッジには、「JavaScript の場合はループ」という異なる種類の実装があります。しかし、その動作を特定し、それを修正することは素晴らしいことです....角度のカスタマイズされたスクロールを実装するには、以下の手順を見つけてください。 1.このスクロールを使用する必要がある子画面の親divで、ディレクティブセレクタ（つまりスクロールバー）を適用します。 2.サイドナビゲーションバーのリンクまたはアイテムのすべての要素に「scrlSpy」クラスを適用し、ID「sidenav」をサイドテナコンテナに提供します。 3.同様に、右側のメインコンテナのすべてのセクションに「contentSpy」クラスを適用します。コンテナにIDを、つまり「contentCol」を適用します。 4.それはhtmlページにあります。 5.以下のディレクティブコードをコピーし、コンポーネントまたは共有コンポーネントを参照して使用してください。 注： - アクティブなクラスの装飾で、最初の要素をアクティブとしてマークしていることを確認してください。クラス名が異なる場合は、コードをねじってください。

import {Directive, HostListener, Inject} from '@angular/core'; 
 
import { DOCUMENT } from '@angular/platform-browser'; 
 

 
@Directive({ 
 
    selector: '[scroller]' 
 
}) 
 

 
export class ScrollingDirective { 
 
    allEle: any; 
 
    allContent: any; 
 
    i: number; 
 
    activeEle: number; 
 
    constructor(@Inject(DOCUMENT) private document: Document) { 
 

 
    } 
 
    ngOnInit() { 
 
     this.allEle = this.document.getElementsByClassName('scrlSpy'); 
 
     this.allContent = this.document.getElementsByClassName('contentSpy'); 
 
     this.i = 0; 
 
    } 
 

 
    @HostListener("window:scroll", ['$event']) 
 
    onWindowScroll(event) { 
 
     let sideNav = this.document.getElementById('sidenav'); 
 
     let contentCol = this.document.getElementById('contentCol'); 
 
     let scrollOffset = this.document.body.scrollTop; 
 
     let j: number = 0; 
 
     let contentCollection: any[]; 
 
     this.activeEle = 0; 
 
     if (scrollOffset > 100) { 
 
      sideNav.classList.add("sideNaveMargintop"); 
 
      contentCol.classList.add("fltRight"); 
 
     } 
 
     else { 
 
      contentCol.classList.remove("fltRight"); 
 
      sideNav.classList.remove("sideNaveMargintop"); 
 
     } 
 
     for (let ele in this.allEle) { 
 
      if (ele != null && j < this.allEle.length) { 
 
       var element = this.document.getElementById(this.allEle[ele].id).classList.contains("active"); 
 
       if (element === true) { 
 
        break; 
 
       } 
 
       this.activeEle++; 
 
      } 
 
     } 
 
     for (let cont in this.allContent) { 
 
      if (cont != null && this.i < this.allContent.length && this.i > 0 && 
 
       this.activeEle < this.allContent.length - 1) { 
 
       let contentEle = this.document.getElementById(this.allContent[cont].id);     
 
       if (contentEle != null) { 
 
        if (scrollOffset >= this.allContent[this.activeEle + 1].offsetTop) { 
 
         this.document.getElementById(this.allEle[this.activeEle].id).classList.remove("active"); 
 
         this.document.getElementById(this.allEle[this.activeEle + 1].id).classList.add("active"); 
 
        } 
 
        else if (scrollOffset <= this.allContent[this.activeEle].offsetTop && this.activeEle - 1 >= 0) { 
 
         this.document.getElementById(this.allEle[this.activeEle].id).classList.remove("active"); 
 
         this.document.getElementById(this.allEle[this.activeEle - 1].id).classList.add("active"); 
 
        } 
 
       } 
 
      } 
 
      else if (this.allContent.length - 1 == this.activeEle && scrollOffset <= this.allContent[this.activeEle].offsetTop) { 
 
       this.document.getElementById(this.allEle[this.activeEle].id).classList.remove("active"); 
 
       this.document.getElementById(this.allEle[this.activeEle - 1].id).classList.add("active"); 
 
      } 
 
      this.i++; 
 
     } 
 

 
     this.i = 0; 
 
     j = 0; 
 
    } 
 
}