Melhoria do código Scroll via angular

estou tentando aprender e melhorar em angular. fiz um código em um projeto que se resume :
Caso ache um campo invalido, acione o scroll até o campo .O problema que são dois campos(dois inputs) e esses campos são dinâmicos, ou seja, podem ser apagados e adicionados e para ter uma referencia deles, é necessário criar uma key. E meu código, ficou bem extenso e não consegui desenvolver uma lógica para verificar esses dois campos e apenas um código, como pode ver abaixo eu dividi em dois, label .E dessa forma que eu fiz, ao realizar o scroll, ele sempre fica abaixo do index correto, ou seja, se o invalid tiver no campo(0), ele para no index(1), já verifiquei, e ele vai para o index certo.

HTML

<div class="formulario__campo" fxFlex="28%" fxFlex.xs="100%" fxFlex.sm="0 1 100%" id="campoTabela-{{i}}">
   <legend>Label</legend>
   <mat-form-field appearance="outline" class="formulario__campo-conteudo" >
      <input matInput placeholder="Label" formControlName="campoTabela" maxlength="255" >
   </mat-form-field>
</div>
<div class="formulario__campo" fxFlex="28%" fxFlex.xs="100%" fxFlex.sm="0 1 100%" id="label-{{i}}">
   <legend>Label</legend>
   <mat-form-field appearance="outline" class="formulario__campo-conteudo" >
      <input matInput placeholder="Label" formControlName="label" maxlength="255" >
   </mat-form-field>
</div>

TS


 if (control.invalid) {
      this.validarCampos(this.campoTemaFormGroup);
      this.servicoMensagem.setMensagemTexto('Informe os campos obrigatórios.');

      Object.keys(this.getControls()).forEach(key => {
        const controls: FormControl() = this.getControls()(key).controls
        console.log(key)
        if(controls('label').invalid) {
        var itemToScrollTo = this.document.getElementById('label-' + key);
        console.log(itemToScrollTo)
        itemToScrollTo.scrollIntoView({
          behavior: 'smooth',
        });
      }

      if(controls('campoTabela').invalid) {
        var itemToScrollTo = this.document.getElementById('campoTabela-' + key);
        console.log(itemToScrollTo)
        itemToScrollTo.scrollIntoView({
          behavior: 'smooth',
        });
      }
    });

Click scroll to open in new tab – good practice?

Is it a good practice to provide "open in new tab" option, by clicking link using scroll? Do you know any resources or research on this; any reasons why/when it shouldn’t be a default option?

javascript – Medir scroll en un modal con Google Tag Manager

necesito medir por Google Tag Manager el scroll que se realiza en un modal, he intentado con el activador de profundidad de desplazamiento, pero no funciona. Solo me toma el scroll de la página principal. Ya no se cómo medirlo, muchas gracias.

El modal está oculto con visibility Hidden entonces el activador de visibilidad no funciona.

dnd 5e – How can this regular hobgoblin from the Acquisitions Incorporated adventure “The Orrery of the Wanderer” use a Spell Scroll?

The hobgoblin is likely a documancer.

Franchises from the Acquisitions Inc. book have an organizational position called a Documancer:

Every great Acquisitions Incorporated quest begins with a contract from Head Office — and a franchise’s documancer is most likely the one who controls and channels the power of that contract. A documancer bears the responsibility of managing each of a franchise’s quests, of ensuring that every condition of the quest is fulfilled, and of recording and sending on information vital to Head Office when the mission is complete. When creating contracts with other organizations, a documancer makes sure that the language benefits both the franchise and Acquisitions Incorporated.

A documancer has a particularly relevant ability:

In addition to the proficiencies noted below, you can add your proficiency bonus to an ability check to organize lore, analyze official or arcane documents, or convey a legally binding point of view.

The position description goes on to assume that a documancer can use spell scrolls even if the spell does not appear on their spell list. The documancer’s Satchel of Holding feature states:

Additionally, you can use an action to draw forth from the documancy satchel a spell scroll of comprehend languages. The scroll vanishes when used, or ten minutes after it appears.

The feature just assumes you can use a comprehend languages scroll, even though it is entirely feasible that your chosen class could not normally use it. The rank 4 feature Scroll Service continues in this assumption:

Also at rank 4, you can use an action to request one spell scroll containing a spell of up to 3rd level from Head Office. If you succeed on a DC 15 Intelligence (Arcana) check, the scroll instantly appears within your documancy satchel. Only you can use this scroll.

So while it is not explicitly stated that documancers are an exception to the spell scroll class restriction, it is quite heavily implied to be so.

This is further supported by this statement about company positions:

When you choose a company position for your character, that choice is independent of and in addition to your character’s background, class, and other options.

You choice as a documancer is supposed to be independent of you choice of class, but if the spell scroll restriction applies to the documancer, then it is not indpendent.

Since this particular hobgoblin is an employee of Dran Enterprises, and it is stated that they will use spell scrolls, the most likely answer is that they are a documancer in that organization, and so are particularly gifted at reading arcane documents.

dnd 5e – How does a regular hobgoblin use a spell scroll?

The hobgoblin is likely a documancer.

Acquisitions Inc. has an organizational position called a Documancer:

Every great Acquisitions Incorporated quest begins with a contract from Head Office — and a franchise’s documancer is most likely the one who controls and channels the power of that contract. A documancer bears the responsibility of managing each of a franchise’s quests, of ensuring that every condition of the quest is fulfilled, and of recording and sending on information vital to Head Office when the mission is complete. When creating contracts with other organizations, a documancer makes sure that the language benefits both the franchise and Acquisitions Incorporated.

A documancer has a particularly relevant ability:

In addition to the proficiencies noted below, you can add your proficiency bonus to an ability check to organize lore, analyze official or arcane documents, or convey a legally binding point of view.

The position description goes on to assume that a documancer can use spell scrolls even if the spell does not appear on their spell list. The documancer’s Satchel of Holding feature states:

Additionally, you can use an action to draw forth from the documancy satchel a spell scroll of comprehend languages. The scroll vanishes when used, or ten minutes after it appears.

The feature just assumes you can use a comprehend languages scroll, even though it is entirely feasible that your chosen class could not normally use it. The rank 4 feature Scroll Service continues in this assumption:

Also at rank 4, you can use an action to request one spell scroll containing a spell of up to 3rd level from Head Office. If you succeed on a DC 15 Intelligence (Arcana) check, the scroll instantly appears within your documancy satchel. Only you can use this scroll.

So while it is not explicitly stated that documancers are an exception to the spell scroll class restriction, it is quite heavily implied to be so.

This is further supported by this statement about company positions:

When you choose a company position for your character, that choice is independent of and in addition to your character’s background, class, and other options.

You choice as a documancer is supposed to be independent of you choice of class, but if the spell scroll restriction applies to the documancer, then it is not indpendent.

Since this particular hobgoblin is an employee of Dran Enterprises, the most likely answer is that they are a documancer in that organization, and so are particularly gifted at reading arcane documents.

javascript – React.js column-reverse make the parent scroll

Reproduce steps:

  1. Click Add button five times
  2. Scroll the message box div to top and bottom again
  3. click Add button again.

The parent will be scrolled.
I can’t see the problem if I don’t use the ‘column-reverse’.
If I do the 2nd step, the element at the bottom is fixed to parent element (it is unexpected).

import React, { useEffect, useState, useRef } from "react";

export default function App() {
  const (messages, setMessages) = useState(());
  const addMessage = () => {
    setMessages((...messages, `new message-${messages.length}`));
  };
  const containerRef = useRef();
  useEffect(() => {
    containerRef.current.scrollTop = 250;
  }, ());
  return (
    <>
      <button
        style={{
          position: "fixed"
        }}
        onClick={addMessage}
      >
        Add
      </button>
      <div
        ref={containerRef}
        style={{
          display: "grid",
          overflow: "auto",
          height: "100vh"
        }}
      >
        <div
          style={{
            minHeight: "200px",
            background: "red"
          }}
        ></div>
        <div
          style={{
            display: "flex",
            overflow: "auto",
            flexDirection: "column-reverse",
            minHeight: "300px",
            maxHeight: "300px"
          }}
        >
          <div>
            {messages.map((msg, index) => (
              <div key={index} style={{ height: "100px" }}>
                {msg}
              </div>
            ))}
          </div>
        </div>
        <div
          style={{
            minHeight: "1000px",
            background: "blue"
          }}
        >
          bottom
        </div>
      </div>
    </>
  );
}

tables – Is infinite scroll intuitive in enterprise applications?

I know infinite scroll is all the rage in social media applications because it keeps me scrolling for longer than I should, but in terms of functionality are there any pros/cons to using infinite scroll in an enterprise environment?

This is also assuming that search and filter options are still provided, but a continuous scroll of 1000s of objects in a table would still be a possibility.

[cXF] Thread scroll enhancement | NulledTeam UnderGround

Add some features when scrolling a thread like sticky thread title in navigation or below it (useful if scrolling long threads) or maybe add some scroll progress bar in various positions. Check below for more information.

FEATURES

  • add thread title in navigation or below it when scrolling a thread
  • optionally add a close button to remove the thread title (more information on screens below)
  • optionally add “Currently reading” (or edit the text via phrase!) in front of a…

.(tagsToTranslate)xenforo nulled(t)nulled(t)whmcs nulled(t)vbulletin nulled(t)whmcs themes nulled(t)whmcs modules nulled(t)whmcs template nulled(t)nulled forum(t)best nulled scripts site(t)whmcs templates nulled(t)phpfox nulled(t)nulled script(t)xenforo 2 nulled(t)best nulled sites(t)xenforo nulled themes(t)whmcs nulled(t)nulled scripts(t)vbulletin 5 nulled(t)whmcs addons nulled(t)arrowchat nulled(t)cs-cart nulled(t)xfilesharing pro nulled(t)nulled script forum(t)cs cart nulled(t)nulled sites(t)blesta nulled

woocommerce offtopic – Auto-move (scroll) product thumbnails on product page image slider

I’ve got a problem with the product image slider on the product page.
I used flex to display thumbnails in one row. There are 5 thumbnails in a row. Images move correctly using direction arrows.
How to set up auto-scroll to the next thumbnail in a row? Now it moves (main image changing) but 5 thumbnails in a row are still static.
I set overflow-x to auto, so you can see there are the next images in a row.

Basic code:

div.product div.images .flex-control-thumbs {
    display:flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 50px;
}

div.product div.images .flex-control-thumbs li {
    display: flex;
    overflow-x: visible;
    flex: 1 0 20%;
}

My test site – you can see how it works:
https://fewbirds.tastewp.com/produkt/test-product/