Question

我做了一些研究，刚刚看到了窗口滚动事件。我怎样才能在 div 滚动事件上做到这一点？试了很多方法，还是不行。

如果 div(content) 向下滚动隐藏标题，如果 div(content) 向上滚动显示标题。

HTML

<script>
    
    paypal.Buttons({
        style:{
            color:'blue',
            shape:'pill'
        },createOrder: function (data, actions) {
    var cost = parseFloat(document.getElementsByClassName('totamount')[0].innerText.replace('$',''));
    var address = document.getElementsByClassName('product-name')[0].innerText;
    return actions.order.create({
        purchase_units : [{
            amount: {
                name: '####### ######',
                description: "##### #####at: " + address,
                value: cost
            }
        }]
    });
},
onApprove: function (data, actions) {
    return actions.order.capture().then(function (details) {
        console.log(details)
        var paydetails = JSON.parse(details);
        var payee = paydetails.payer.name.given_name + " " + paydetails.payer.name.surname;
        var payid = paydetails.id;
        console.log(payee);
        console.log(payid);
        //document.getElementsByClassName('cart-total')[0].innerHTML= JSON.stringify(details)
        //window.location.replace("https://######.com/######/paymentmade.php?uid=<?php echo $userid ?>")
    })
},
onCancel: function (data) {
    window.location.replace("https://#######.com/#######/quote.php?fname=<?php echo $fname ?> &lname=<?php echo $lname ?>&email=<?php echo $email ?>&tel=<?php echo $tel ?>&lot=<?php echo $lot ?>&building=<?php echo $building ?>&lotID=<?php echo $lotid ?>")
}
    }).render('#paypal-payment-button');</script>
<script src="include/script.js"></script>

TS

<header *ngIf="scroll">
    <app-toolbar (OpenDrawer)="OpenDrawer()"></app-toolbar>
    </header>
<div class="app-body">
    <content  scrollEvents="true" scrolling>
        <router-outlet></router-outlet>
    </content>
</div>

Answer 1

您可以像在普通网站中那样实现这一点，您只需要对 DOM 元素的引用，并且您可以使用 @ViewChild 来实现：

HTML：

<div #scroller></div>

<div *ngIf="displayDiv"></div>    // Element you want to hide on scroll

TS (Javascript)

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

export class MyComponent implements OnInit {

  @ViewChild('scroller')
  scroller: ElementRef;

  displayDiv = true;

  ngOnInit() {
  
     this.scroller.nativeElement.onscroll = () => {

         let top = this.scroller.nativeElement.scrollTop;

         if (top > 0) {               // We scrolled down
             this.displayDiv = false;
         }
         else {
             this.displayDiv = true;
         }

     }

  }
}

向下滚动时隐藏 div，显示时显示 div

1 个答案: