Усилитель Google: контент выше экрана, прокрутка вверх невозможна - PullRequest
Новая
       12

Усилитель Google: контент выше экрана, прокрутка вверх невозможна

0 голосов
/ 02 октября 2019

Я пытаюсь сделать лайтбокс google amp длинным текстом, не помещая ligntbox на некоторых устройствах, используя атрибут прокрутки в теге лайтбокса. Текст прокручивается, но его невозможно прокрутить до самой верхней части текста, верхняя часть скрыта.
Ниже HTML, CSS и двух изображений, одно из которых отлично помещается в лайтбоксе, другое прокручивается вверх, но вверху текстаявляется невидимым.
Примечание: я не знаю высоту экрана, и пользовательский javascript не разрешен в amp, поэтому я не могу использовать iframe или div с переполнением, так как для них требуется высота.

Amp html part: {$ law.text} заменен длинным текстом 

<amp-lightbox id="law-lightbox" layout="nodisplay" class="popup-lightbox" scrollable>
  <div class="popup-content">
    <div class="popup-content-header">
      <button type="button" on="tap:law-lightbox.close" class="popup-close">×</button>
      <h4 class="popup-header-title">{$law.title}</h4>
    </div>
    <div class="popup-content-body">
      {$law.text}  
    </div>    
  </div>
</amp-lightbox>

CSS: 

.popup-lightbox{
  background: rgba(0,0,0,0.8);
}
.popup-content{
  background-color: #fff;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  left:  50%;
  width: 90%;
  max-width: 420px;
}
.popup-content-body {
    background-image: url("/i/site-bg.jpg");
  background-repeat: repeat;
  background-color: #E6D0BB;
    color: #603415;
    padding: 4px;
}
.popup-close{
  border: none;
  background-color: transparent;
  color: #E6D0BB;
  cursor: pointer;
  font-size: 1.5em;
  float: right;
  padding: 0px;
  margin: -4px 0px 0px 0px;
  text-decoration: none;
}
.popup-close:hover{
  color: #fff;
}
.popup-content-header {
  background-color: #603415;
    color: #E6D0BB;
    padding: 2px;
}
.popup-content-header h4 {
  padding: 2px;
  margin: 0px;
}
.popup-header-title {
}
.popup_field {
  width: 100%;
}

Это изображение прокручено вверх, но часть верхнего текста скрыта: brokenimage

Вот как это выглядит на больших дисплеях: big

1 Ответ

1 голос
/ 02 октября 2019

.popup-content{ max-height:100%; overflow:auto; }

Это должно помочь. Вы никогда не устанавливаете высоту или максимальную высоту, и вы центрируете ее, поэтому независимо от того, как долго это будет, она будет центрирована ... если вы хотите иметь возможность прокрутки, вам нужно установить что-то подобное выше. Максимальная высота, чтобы понравиться 90% любой у вас будет немного места сверху и снизу :)

...