Показать и скрыть элементы в зависимости от того, есть ли в Angular 8 overflow-x (горизонтальная прокрутка)

Question

У меня угловое приложение. В строке меню я отображаю путь текущего routerLink. Который в некоторых частях приложения может стать довольно широким. Настолько широкий, что создает горизонтальную прокрутку. То, что я хотел бы сделать, это скрыть этот путь, как только появляется прокрутка, и показать вместо него другой элемент (это будет происходить на меньших экранах). Не уверен, что я должен делать это в чистом CSS программно в файле ts.

Поэтому я в основном хочу удалить «someclass», когда есть overflow-x, и вместо этого показать «whenthereisoverflow». Я хочу переместить путь ссылки на новую панель инструментов при переполнении.

Я не хочу использовать медиа-запросы или аналогичные решения, потому что ширина пути может варьироваться в зависимости от того, где вы находитесь в приложении.

<mat-toolbar>
 <div class="someclass">
    <ul>
        <li>
            <a [routerLink]="link.url">
                {{ link.url }}
            </a>
        </li> 
    </ul>
  </div>

<div>Some other content</div>
 </mat-toolbar>


<mat-toolbar class="whenthereisoverflow">
 <div>
    <ul>
        <li>
            <a [routerLink]="link.url">
                {{ link.url }}
            </a>
        </li> 
    </ul>
  </div
 </mat-toolbar>

html css angular scroll overflow

0

indd

Answer 1

Вы можете легко это сделать, проверив, не переполнено ли содержимое div . Используйте следующий фрагмент, чтобы сделать это.

Comp- 1.component.html

<mat-toolbar>
    <div id="divToCheck">
        <div id="divToModify">
            <!--content-->
        </div>
    </div>
</mat-toolbar>

Comp- 1.component.ts

checkOverflowing() {
    const element = document.getElementById('divToCheck');

    const curOverflow = element.style.overflow;

    if (!curOverflow || curOverflow === 'visible') {
      element.style.overflow = 'hidden';
    }

    const isOverflowing = element.clientWidth < element.scrollWidth || element.clientHeight < element.scrollHeight;

    element.style.overflow = curOverflow;

    if (isOverflowing) {
      document.getElementById('divToModify').classList.add('someclass');
    } else {
      document.getElementById('divToModify').classList.add('whenthereisoverflow');
    }

  }

это проверит, переполнен ли divToCheck , и добавит соответствующий класс в divToModify , как вы пожелаете.

Надеюсь это поможет!

Удачи!!

Answer 2

Попробуй это:

p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<a href="#"><p>skdjfhksjdfhksjd fhksdjfhksdjfh ksjdhfksjdfhskdjfhs skdjfhsdfk skdjfhksjdfhksjd fhksdjfhksdjfh ksjdhfksjdfhskdjfhs skdjfhsdfk</p></a>

Показать и скрыть элементы в зависимости от того, есть ли в Angular 8 overflow-x (горизонтальная прокрутка)

2 ответа

Новые вопросы

html