Плавающая горизонтальная полоса прокрутки в Angular 2+ - PullRequest
Новая
       6

Плавающая горизонтальная полоса прокрутки в Angular 2+

0 голосов
/ 24 ноября 2018

В Angular 6 у меня широкий и длинный стол.Проблема в том, чтобы прокрутить горизонтально, чтобы перейти к нижней части таблицы, пользователю необходимо перейти к нижней части таблицы.

Я хотел бы реализовать плавающую горизонтальную полосу прокрутки, которая перемещает горизонтальные полосы прокрутки, когда таблицаввиду.Я сталкивался с этими решениями, используя Jquery, но изо всех сил пытаюсь реализовать это в Angular 6 (или 5,4,3 и т. Д.).Кто-нибудь есть решение для этого или может помочь мне, как реализовать в Angular?Большое спасибо заранее.

Демонстрация

Плагин JQUERY

Решение Jquery - StackOverflow

1 Ответ

0 голосов
/ 24 ноября 2018

решение 1: если вы ищете, как использовать jQuery с Angular , вы можете достичь, сначала добавив jQuery и floatingScroll plugin до angular.json файла в "scripts": [...]

для использования jQuery
TS 

....
declare let $: any;    // you can use "jQuery" keyword instead of "$"

@component({
  selector: '...',
  templateUrl: ['...'],
  styleUrls: ['...']
})
export class JqueryExampleComponent implements onInit {

  constructor(private eleRef: ElementRef) {}

  ngOnInit() {
    $(this.eleRef.nativeElement).find('yourTableSelector').floatingScroll();
  }
}

когда вы используете $(this.eleRef.nativeElement), то получите корень дерева component dom, а затем .find('yourTableSelector'), чтобы получить element, который вы хотите.

решение 2: есть альтернативная библиотека для достижения плавающей полосы прокрутки или пользовательской полосы прокрутки в общем, одна из них ngx-perfect-scrollbar я использую ее, и она дает вам хорошие функции для управления вашей прокруткой и отслеживания его поведения.это ... вы можете разрешить вертикальную или горизонтальную полосу прокрутки с некоторыми css подобными position: fixed и javascript функциональными возможностями показать или скрыть полосу прокрутки, если таблица в поле зрения или нет, вы можете достичь того, что вы хотите.

...