Исправлен элемент SVG при вертикальной прокрутке, проблемы с Firefox - PullRequest
Новая
       7

Исправлен элемент SVG при вертикальной прокрутке, проблемы с Firefox

0 голосов
/ 02 июля 2018

При попытке вертикального исправления элемента SVG внутри прокручиваемого элемента div задайте его координату y для свойства scrollTop, как в следующем примере: 

var container = document.getElementById('container');
var fixedText = document.getElementById('fixed-text');
fixedText.setAttribute('y', container.scrollTop + 50);
 container.addEventListener('scroll', function() {
   fixedText.setAttribute('y', container.scrollTop + 50);
 });
    div {
      border: 1px solid black;
      width: 300px;
      height: 300px;
      margin: auto;
      overflow: auto;
    }
    svg {
      width: 400px; 
      height: 2000px;
    }
    text {
      text-anchor: middle;
    }
  <div id="container">
    <svg>
      <text id="fixed-text" x="200" y="50">Fixed text vertically, but not horizontally</text>
    </svg>
  </div>

JSFiddle: https://jsfiddle.net/fr4top2g/10/

Элемент SVG корректно исправлен в Chrome, но у меня возникают проблемы с Firefox, когда элемент, кажется, позиционируется до обновления поля просмотра внутри div, вызывая его колебание на экране, вместо того, чтобы фиксировать как ожидается. (Это особенно заметно при прокрутке колесиком мыши).

Не могли бы вы подсказать простое решение этой проблемы, которое может быть вызвано различной обработкой прокрутки в Chrome и Firefox?

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

Примечание 2: обратите внимание, что если мы откроем веб-консоль в Firefox, щелкнем по элементу SVG, а затем прокрутим колесико мыши по вертикали, эта проблема по какой-то причине будет решена.

Примечание 3: Я уже использую D3.js в этом проекте, поэтому любое решение, связанное с этим, не будет беспокоить меня. В настоящее время я не использую JQuery, хотя это было бы возможно, если бы мне пришлось.

Примечание 4: та же проблема возникает в решении, представленном в этом разделе: Исправление элемента по оси Y, но прокрутка со страницей по оси x?

Заранее благодарю за любую помощь.

1 Ответ

0 голосов
/ 03 июля 2018

Управление прокруткой Firefox выполняется асинхронно с обновлением элементов DOM, как указано на этой странице: https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

Мне наконец-то удалось исправить элемент SVG, используя не Javascript, а немного CSS, а также внешний объект SVG: 

    #container {
      border: 1px solid black;
      width: 300px;
      height: 300px;
      margin: auto;
      overflow: auto;
    }
    svg#outer-svg {
      width: 400px;
      height: 2000px;
    }
    text {
      text-anchor: middle;
    }
    #inner-svg {
      position: sticky;
      top: 70px;
      width: 400px;
      height: 50px;
    }
    <div id="container">
      <svg id="outer-svg">
        <foreignObject id="foreign-object" width="100%" height="100%">
          <body xmlns="http://www.w3.org/1999/xhtml">
            <svg id="inner-svg">
              <text x="200" y="30">Fixed text vertically, but not horizontally</text>
            </svg>
          </body>
        </foreignObject>
      </svg>
    </div>
...