Блог

Главная - Вопросы по программированию - Как обновить родительскую ширину прокрутки и высоту прокрутки после того, как дочерний узел станет меньше?

Как обновить родительскую ширину прокрутки и высоту прокрутки после того, как дочерний узел станет меньше?

#css

Вопрос:

У меня есть родитель div height: 120px; width: 120px и рыжий ребенок div height: 200px; width: 200px . Теперь, поскольку дочерний узел больше, он растягивается до scrollWidth и scrollHeight родительского узла, и, следовательно, отображается полоса прокрутки.

введите описание изображения здесь

Затем я добавляю transform: scale(0.5) к красному дочернему div элементу, чтобы сделать его меньше, вертикальная полоса прокрутки все еще отображается и scrollHeight остается неизменной, в то время как горизонтальная полоса прокрутки исчезает и scrollWidth изменяется.

введите описание изображения здесь

Мой вопрос: есть ли способ автоматически скрыть/отобразить все полосы прокрутки после сжатия/расширения дочернего узла? Другими словами, есть ли способ обновить и scrollWidth то, и scrollHeight другое в соответствии с размером дочернего узла?

демо-версия codesandbox: https://codesandbox.io/s/scrollwidth-test-bk04o

Заранее спасибо.

Ответ №1:

Я не понимаю вашей цели, но я думаю, что вы можете рассчитать свою внутреннюю высоту и ширину div с помощью своего масштаба

    **Line 17**

   <div
      style={{
        width: 200 * scale,
        height: 200 * scale,
        background: "red",
        transform: `scale(${scale})`,
        transformOrigin: "0 0"
      }}
    />

Комментарии:

1. Я не хочу изменять размер дочернего div, я просто хочу увеличить его. В этой демонстрации это просто красный квадрат, но на самом деле у него есть содержимое. Я хочу, чтобы полоса прокрутки исчезла после сжатия дочернего div.

2. Ваш внешний div изменяет переполнение при изменении ширины/высоты внутреннего элемента, это означает, что когда у вас есть элемент с шириной 200 пикселей, у нас есть переполнение и полоса прокрутки, а когда у нас 119 пикселей, у нас ее нет, когда вы хотите увеличить или уменьшить масштаб или что-то в этом роде, вы должны изменить ширину и высоту внутреннего компонента, на самом деле полоса прокрутки зависит от ширины/высоты внутренних элементов

Метки: ,