Хорошо, так что я на самом деле не знаю, что проблема с 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. Но он не используется и не отображается.
Также кажется, что он ломается мое ограничение по ширине, с радостью показывающее диаграмму дальше справа от экрана.
Даже если у вас нет решения, любые идеи приветствуются на этом этапе. Спасибо, что нашли время.