Табби JS с SVG Prevent Scroll

Question

Я пытаюсь использовать Tabby JS Plugin со встроенным элементом SVG.Щелчок по тегам привязки вне SVG работает отлично, когда оборачивается вокруг элементов SVG, страница «переходит» к идентификатору.

Может ли кто-нибудь объяснить, почему это происходит?

https://github.com/cferdinandi/tabby

Я создал демо , используя оригинальный плагин HTML, где вы можете увидеть эту проблему.

<g data-tabs>
        <a data-tab href="#tab1">
      <rect id="red" x="177.9" y="44.2" class="tab st1" width="96" height="77.5"/>
    </a>
        <a data-tab href="#tab2">
      <rect id="orange" x="107.9" y="169.8" class="tab st2" width="166" height="101.5"/>
    </a>
</g>

Заранее большое спасибо

Answer 1

Это происходит, когда вы используете tabby , чтобы отображать HTML-элементы на вкладках, в то время как для SVG-элементов вы использовали # (Location Hash) перейти к элементу страницы.Хэш местоположения заставит элемент управления перейти к указанному элементу.Это поведение, которое вы замечаете.

Вы можете прочитать следующие блоги, чтобы получить представление о том, как происходит навигация по хэшу Location.

W3 School Documentation: https://www.w3schools.com/jsref/prop_loc_hash.asp

Блог, объясняющий навигацию: https://www.oshyn.com/Blogs/2011/December/JavaScript_Navigation_using_Hash_Change____