Переполнение-x: прокрутка! Важно не работает в Samsung Интернет с переведенными SVG - PullRequest
Новая
       27

Переполнение-x: прокрутка! Важно не работает в Samsung Интернет с переведенными SVG

1 голос
/ 03 июня 2019

У меня есть контейнер div, горизонтально заполненный набором рисунков SVG, которые рисуются динамически.Поскольку ширина контейнера превышает ширину окна, применяется overflow-x: scroll !important.Однако, хотя он работает в большинстве браузеров, интернет-браузер Samsung не поддерживает прокрутку div.Что я могу с этим поделать?

РЕДАКТИРОВАТЬ: функция jQuery scroll() не будет запускать событие alert либо

РЕДАКТИРОВАТЬ2: я выполняю динамический translate() для каждого SVGрисунок, чтобы расположить их в виде сетки

1 Ответ

1 голос
/ 03 июня 2019

Я выяснил причину этой проблемы:

Как я уже сказал, я рисую элементы SVG динамически. Я также transform: translate() их. Но это не заставит overflow-x работать в Интернет Samsung. Вместо этого мне пришлось создать оболочку div для каждого чертежа SVG и перевести эту оболочку, а не сам SVG.

Итак, вместо этой структуры: 

<div id="big-wrapper">
  <svg style="transform: translate([dynamic value to order all svgs in a grid])"></svg>
  <svg style="transform: translate([dynamic value to order all svgs in a grid])"></svg>
  <svg style="transform: translate([dynamic value to order all svgs in a grid])"></svg>
  ...
</div>

Мне нужна эта структура: 

<div id="big-wrapper">
  <div id="small-wrapper1" style="transform: translate([dynamic value to order all svgs in a grid])">
     <svg></svg>
  </div>
  <div id="small-wrapper2" style="transform: translate([dynamic value to order all svgs in a grid])">
     <svg></svg>
  </div>
  <div id="small-wrapper3" style="transform: translate([dynamic value to order all svgs in a grid])">
     <svg></svg>
  </div>
  ...
</div>
...