Как заставить плавающую полосу прокрутки (удобную прокрутку) работать с LitElement? - PullRequest
1 голос
/ 09 февраля 2020

Хорошо, так что я на самом деле не знаю, что проблема с LitElement, но это единственное, о чем я могу думать, что это может сломать его.

Я пытаюсь использовать handy-scroll чтобы иметь плавающую полосу прокрутки. Я хочу прокручивать по вертикали легенду и диаграмму (которые расположены горизонтально рядом друг с другом, легенду, как в легенде географической карты c) и сделать так, чтобы плавающая полоса прокрутки над диаграммой могла прокручивать диаграмму по горизонтали. Настройка выглядит следующим образом:

<link rel="stylesheet" type="text/css" href="/dist/bundle.css">
<div class="" style="overflow-y: scroll; overflow-x: hidden; height: 200px;">
    <lv-legend style="display: inline-block;"></lv-legend>
    <div id="handscrolls" style="display: inline-block;">
        <lv-diagram style="display: inline-block; width: 500px;"></lv-diagram>
    </div>
</div>
<lv-menu style="display: block;"></lv-menu>

Элементы, начинающиеся с "lv", являются моими пользовательскими элементами. lv -gram содержит svg, который регулярно обновляется. По этой причине я монтирую и обновляю полосу прокрутки, как написано на их github, но из функций обратного вызова LitElement:

updated(changedProperties) {
    let handscrollsContainer = this.shadowRoot.getElementById("handscrolls");
    handyScroll.update(handscrollsContainer);
}

firstUpdated(changedProperties) {
    let handscrollsContainer = this.shadowRoot.getElementById("handscrolls");
    handyScroll.mount(handscrollsContainer);
    console.log("the mounting was successful: "+ handyScroll.mounted(handscrollsContainer));
}

Я пробовал различные варианты того, где смонтирован handyScroll, но он просто не хочет на работу.

Он прикрепляется как дочерний элемент <div id="handscrolls"> с классами class="handy-scroll handy-scroll-hidden" и ростом 0. Но он не используется и не отображается.

Также кажется, что он ломается мое ограничение по ширине, с радостью показывающее диаграмму дальше справа от экрана.

Даже если у вас нет решения, любые идеи приветствуются на этом этапе. Спасибо, что нашли время.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...