У меня есть прокручиваемый бумажный диалог, который заполнен повторением dom из запроса firebase. Все работает нормально, за исключением того, что paper-dialog-scrollable не прокручивается вниз, когда firebase добавляет запись в массив. Мне удалось установить обратный вызов всякий раз, когда массив получает новую запись (в основном с наблюдателем на соединенном массиве, а не на массиве). Итак, как мне указать paper-dialog-scrollable прокручивать вниз от этого обратного вызова? Я видел решения здесь, которые, похоже, не работают. Спасибо за любое понимание.
Укажите paper-dialog-scrollable прокручивать вниз
Ответы (1)
Как указано в предоставленной вами ссылке, дайте paper-dialog-scrollable немного id (например, pds), а затем добавьте следующий код:
this.$.pds.$.scrollable.scrollTop = this.$.pds.$.scrollable.scrollHeight;
Значение
scrollTopэлемента — это измерение расстояния от вершины элемента до самого верхнего видимого содержимого. Если содержимое элемента не создает вертикальную полосу прокрутки, его значениеscrollTopравно 0. Подробнее о scrollTop.Доступное только для чтения свойство
scrollHeightэлемента представляет собой измерение высоты содержимого элемента, включая содержимое, невидимое на экране из-за переполнения. Подробнее о scrollHeight.
Я сделал демонстрацию здесь: https://plnkr.co/edit/JIZEdd6NoBBnwndbQuFA?p=preview .
person
Ofisora
schedule
20.08.2017
Ваш Plunkr отлично работает. Спасибо! Однако у меня есть вопрос: paper-dialog-scrollable должен находиться внутри реализующего элемента Polymer.PaperDialogBehavior в соответствии с документы. Я что-то упустил здесь?
- person François Perret; 20.08.2017
Кроме того, чтобы это работало при динамической подаче данных элемента прокрутки (в моем случае firebase), мне пришлось ждать до следующего рендеринга после запуска обратного вызова мутации массива:
Polymer.RenderStatus.afterNextRender(this, () => { this.$.scrolly.$.scrollable.scrollTop = this.$.scrolly.$.scrollable.scrollHeight; });
- person François Perret; 20.08.2017
Чтобы быть тщательным, Polymer.RenderStatus.afterNextRender можно заменить принудительным рендерингом элемента dom-repeat, привязанного к массиву результатов firebase. В любом случае, IMO, paper-dialog-scrollable должен автоматически прокручиваться до последнего или предлагать способ сделать это, вместо того, чтобы заставлять нас получать доступ и устанавливать подсвойства...
- person François Perret; 20.08.2017
PaperDialogBehavior делает элемент диалоговым окном Material Design. Итак, если вам нужен материальный дизайн, вы можете его реализовать.
- person Ofisora; 21.08.2017
