Как сделать коллекцию элементов div с фиксированным положением прокручиваемой целиком, если она превышает экран

ProgramBox

Как сделать коллекцию элементов div с фиксированным положением прокручиваемой целиком, если она превышает экран

Post author:admin
Запись опубликована:26 марта, 2023
Post category:Вопросы по программированию

#html

#HTML

Вопрос:

Я работаю над созданием метаданных для отсканированных документов. Генерируемый ею результат представляет собой HTML-файл, который сохраняет положение текста, как на изображении. Структура генерируемого выходного HTML-кода приведена ниже.

     <page num="1" src="document_name">
        <Blocks>
            <line>
            <div coordinates="1777,2546,52,40" index="0" style="position:fixed;left:53.86%;top:33%;height:1.17%;width:1.51%;">content_at_that_position</div>
            </line>
        </Blocks>
    </page>
    <!-- There will be n number of line elements -->

Таким образом, в основном данный отсканированный PDF-файл будет генерировать выходной HTML-файл с текстовыми данными, сохраняющими свою позицию. Проблема, с которой я сталкиваюсь, заключается в том, что сгенерированный HTML не прокручивается. Вывод может быть визуализирован только в существующем размере окна.

Как я могу сделать всю эту коллекцию divs прокручиваемой?

Я попытался изменить положение с фиксированного на относительное и абсолютное. Но это создает перекрывающийся шумный вывод.

Например: Укажите это как входное изображение.

С position:fixed
Как вы можете видеть, прокрутка недоступна.

С position:absolute
Опция прокрутки доступна, но вывод перекрывается и зашумлен.

Я не очень знаком с HTML. Пожалуйста, помогите мне исправить эту незначительную проблему. Есть ли какой-либо способ добиться этого, прикрепив образец HTML-файла

1. почему бы просто не создать элемент-оболочку (который имеет position: fixed; height: 100vh; overflow: auto ) и размещать изображения так, как это естественно для содержимого, следующего за документом?

2. используйте overflow: auto

3. Я создал оболочку, но оболочка становится прокручиваемой, но вспомогательные подразделения все еще исправлены.

Ответ №1:

Итак, хотя я не совсем уверен в том, что вам нужно, я думаю, что это то, о чем вы просите (см. Код ниже). Я установил переполнение для элемента blocks на «overflow», а пробел — на «nowrap». Это приведет к переполнению экрана контентом и позволит прокручивать. Я сделал это на основе предоставленного вами HTML-документа и удалил присутствующий CSS.

Показать фрагмент кода

 <html>

<head></head>

<body>
  <page num="1" src="img/Document2 (1/Document2 (1-0.jpg">
    <blocks style="overflow: scroll;white-space: nowrap;">
      <line style="display: inline-block;">
        <div coordinates="1777,2546,52,40" index="0" style="/*! position:fixed; *//*! left:53.862465919418355%; *//*! top:100.03921568627452%; *//*! height:1.1764705882352942%; *//*! width:1.5146925174189638%; */" type="line">of</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="172,238,310,42" index="1" style="/*! position:fixed; *//*! left:5.2408361102696155%; *//*! top:9.529411764705882%; *//*! height:1.2549019607843137%; *//*! width:9.330505907300818%; */" type="line">Â© 2016, DESIDOC</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1605,1166,551,45" index="2" style="/*! position:fixed; *//*! left:48.65192365949712%; *//*! top:45.92156862745098%; *//*! height:1.3725490196078431%; *//*! width:16.631323841260222%; */" type="line">prob_1ems_ 9f frequent Po_se change,</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1777,2546,52,40" index="0" style="/*! position:fixed; *//*! left:53.862465919418355%; *//*! top:100.03921568627452%; *//*! height:1.1764705882352942%; *//*! width:1.5146925174189638%; */" type="line">of</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="172,238,310,42" index="1" style="/*! position:fixed; *//*! left:5.2408361102696155%; *//*! top:9.529411764705882%; *//*! height:1.2549019607843137%; *//*! width:9.330505907300818%; */" type="line">Â© 2016, DESIDOC</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1605,1166,551,45" index="2" style="/*! position:fixed; *//*! left:48.65192365949712%; *//*! top:45.92156862745098%; *//*! height:1.3725490196078431%; *//*! width:16.631323841260222%; */" type="line">prob_1ems_ 9f frequent Po_se change,</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1777,2546,52,40" index="0" style="/*! position:fixed; *//*! left:53.862465919418355%; *//*! top:100.03921568627452%; *//*! height:1.1764705882352942%; *//*! width:1.5146925174189638%; */" type="line">of</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="172,238,310,42" index="1" style="/*! position:fixed; *//*! left:5.2408361102696155%; *//*! top:9.529411764705882%; *//*! height:1.2549019607843137%; *//*! width:9.330505907300818%; */" type="line">Â© 2016, DESIDOC</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1605,1166,551,45" index="2" style="/*! position:fixed; *//*! left:48.65192365949712%; *//*! top:45.92156862745098%; *//*! height:1.3725490196078431%; *//*! width:16.631323841260222%; */" type="line">prob_1ems_ 9f frequent Po_se change,</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1777,2546,52,40" index="0" style="/*! position:fixed; *//*! left:53.862465919418355%; *//*! top:100.03921568627452%; *//*! height:1.1764705882352942%; *//*! width:1.5146925174189638%; */" type="line">of</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="172,238,310,42" index="1" style="/*! position:fixed; *//*! left:5.2408361102696155%; *//*! top:9.529411764705882%; *//*! height:1.2549019607843137%; *//*! width:9.330505907300818%; */" type="line">Â© 2016, DESIDOC</div>
      </line>
      <line style="display: inline-block;">
        <div coordinates="1605,1166,551,45" index="2" style="/*! position:fixed; *//*! left:48.65192365949712%; *//*! top:45.92156862745098%; *//*! height:1.3725490196078431%; *//*! width:16.631323841260222%; */" type="line">prob_1ems_ 9f frequent Po_se change,</div>
      </line>
    </blocks>
  </page>
</body>

</html>

1. Этот CSS не может быть удален. Положение каждой строки является обязательным для моего вывода. Когда я создаю оболочку без удаления css, оболочка может прокручиваться, но все вспомогательные разделы по-прежнему исправлены.

2. Если это так, то я на 100% уверен, что то, о чем вы просите, невозможно сделать. CSS, который я прокомментировал, придает вашему контенту фиксированное положение. Это означает, что он всегда будет находиться в этом месте. Пожалуйста, смотрите w3schools.com/css/css_positioning.asp .