Создание полосы прокрутки с переполнением не работает? - PullRequest
1 голос
/ 21 января 2020

Я написал доску на Vue. Существует просто элемент svg, и я добавляю к нему другие svg-элементы, например paths. Я хочу прокрутить этот svg и увидеть этот пример, который довольно хорош.

http://jsfiddle.net/qTFxJ/13/

Это моя html часть.

<svg width="1300px" height="500px" style="overflow-x:scroll; overflow-y:scroll;" viewBox="0 0 1300 500" class="flex-item" id="whiteboard" ref="whiteboard"/>

И у меня также есть часть стиля.

#whiteboard {
  /*position: absolute;*/
  /*width: 100%;
  height: 100%;*/
  background: rgb(255, 255, 255);
  z-index: 1;
}

Я не знаю, почему это не работает. Может быть из-за Vue Я не знаю: (

Спасибо за любую помощь: D

1 Ответ

0 голосов
/ 22 января 2020

В приведенном вами примере SVG фактически не прокручивается. Однако полосы прокрутки, которые вы видите, являются частью div. Чтобы добиться того же, вы должны обернуть ваш SVG максимального размера в div размера экрана следующим образом:

<div style="width: 100px">
   <svg width="1300px" height="500px" style="overflow-x:scroll; overflow-y:scroll;" viewBox="0 0 1300 500" class="flex-item" id="whiteboard" ref="whiteboard"></svg>
</div>

Это действительно покажет вам полосы прокрутки.

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