javascript - Encoger un div sin jquery

En mi aplicación Angular, tengo el encabezado con un formato así,

-- Header --

-- Sub header --

-- Search Box --

-- Create and Search Button --

-- Scroll Div --

Html:

<h1> Header </h1>
<h3> Sub header </h3>
<div class="search-box-wrapper">
    <input class="search-box" type="text" placeholder="search"> <br><br><br>
    <button type="button"> Create </button> &nbsp; &nbsp;
    <button type="button"> Search </button> <br><br>
</div>

<div class="scroll-div">
  <ul>
    <li> <h1> User One </h1> </li>
    <li> <h1> User Two </h1> </li>
    <li> <h1> User Three </h1> </li>
    <li> <h1> User Four </h1> </li>
    <li> <h1> User Five </h1> </li>
    <li> <h1> User Six </h1> </li>
    <li> <h1> User Seven </h1> </li>
    <li> <h1> User Eight </h1> </li>
    <li> <h1> User Nine </h1> </li>
    <li> <h1> User Ten </h1> </li>
     </ul>
  </div> 

Css:

.search-box {
   border-radius: 25px;
    border: 5px solid #000;
    padding: 10px;
    width: 90%;
}

.scroll-div {
   height: calc(100vh - 400px);
   overflow: scroll;
}

Y Stackblitz funcionando https://stackblitz.com/edit/angular-vhnt8q

Aquí tengo un div que tiene el nombre de clase scroll-div con elementos de lista que son desplazables..

Si comienzo a desplazar, entonces necesito reducir el search-wrapper (los botones de crear y buscar deben estar ocultos).

De nuevo, al desplazar, llega al punto superior y luego debería ser normal..

La salida esperada es como la búsqueda en Google..

Los resultados de búsqueda iniciales serán como,

Mientras que en inicio de desplazamiento se encogerá como,

De la misma manera, necesito ocultar los botones de crear y buscar cuando comience el desplazamiento y mostrar solo el cuadro de búsqueda (reducido), y al volver a la parte superior del desplazamiento, necesito mostrar nuevamente los botones de crear y buscar.

Por favor, ayúdame a lograr el resultado esperado sin jquery ..

Cualquier resultado angular me ayudaría más..

Respuesta #1

Para ocultar y mostrar un elemento, puedes obtenerlo mediante el id del elemento

Usa el método de evento en el archivo .html y en el archivo .ts agrega la siguiente función:

html: (scroll)="scroll($event.target.value) que se usan para detectar el desplazamiento

ts :

scroll(val) {
    let scroll = document.getElementById('scroll');

    if (scroll.scrollTop == 0) {
      this.isShow = 'show';
    } else {
      this.isShow = 'hide';
    }
  }

Revisa el siguiente fork de stackblitz

Para agregar la animación necesitas importar:

import {
    trigger,
    state,
    style,
    animate,
    transition
} from '@angular/animations';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Luego agrega

 animations: [
     trigger('toggleHeight', [
            state('hide', style({
                height: '0px',
                opacity: '0',
                overflow: 'hidden',
                // display: 'none'
            })),
            state('show', style({
                height: '*',
                opacity: '1',
                // display: 'block'
            })),
            transition('hide => show', animate('200ms ease-in')),
            transition('show => hide', animate('200ms ease-out'))
        ])
    ],

No olvides incluir lo siguiente: import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; y BrowserAnimationsModule en la importación del módulo @NgModule

Para más información sobre información angular, puedes consultar aquí/demo

Respuesta #2

Usa un parámetro booleano y al desplazarte establece false y usa *ngIf para mostrar/ocultar botones y verifica si event.target.scrollTop > 0.

Ver relámpago

HTML

<h1> Header </h1>
<h3> Sub header </h3>
<div class="search-box-wrapper">
    <input class="search-box" type="text" placeholder="search"> <br><br><br>
    <button type="button" *ngIf="scrollable"> Create </button> &nbsp; &nbsp;
    <button type="button" *ngIf="scrollable"> Search </button> <br><br>
</div>
<p> <b> While Scroll startes in the below div and shrink the above create and search </b> </p>
<div class="scroll-div" (scroll)="onscroll($event)">
  <ul>
    <li> <h1> User One </h1> </li>
    <li> <h1> User Two </h1> </li>
    <li> <h1> User Three </h1> </li>
    <li> <h1> User Four </h1> </li>
    <li> <h1> User Five </h1> </li>
    <li> <h1> User Six </h1> </li>
    <li> <h1> User Seven </h1> </li>
    <li> <h1> User Eight </h1> </li>
    <li> <h1> User Nine </h1> </li>
    <li> <h1> User Ten </h1> </li>
     </ul>
  </div>

TS

  scrollable:boolean=true;
  onscroll(event:any){
    console.log(event.target.scrollTop)
    if (event.target.scrollTop > 0) {
      this.scrollable=false;
    }
    else{
      this.scrollable=true;
    }
  }