Как остановить прокрутку iframe, пока он полностью не появится на странице? (фотографии внутри)

Question

Недавно меня вдохновил фотоблог Up On A Hill , который использует свои фотографии для создания рамок, которые перемещаются только после того, как вы прокрутите весь текст поста. Я хочу сделать что-то похожее, но с рамочными HTML-страницами, которые скользят мимо фотографий. И вместо того, чтобы просто пролистывать каждую страницу, я хотел бы, чтобы новые появлялись, как карточки, скользящие по старому контенту, то есть старая страница остается на месте, когда новый материал скользит по верху.

Проблема в том, что HTML-страницы более разборчивы, чем фотографии, а также я очень любитель использования JavaScript.

Я сделал макет только для CSS. У вас есть один фрейм, похожий на веб-сайт, но когда вы дойдете до дна, следующий фрейм смещается вверх:

i.stack.imgur.com / 33JMO.png

И это было бы неуклюже, если бы не две вещи. Во-первых, скользящая рамка вверх - это активная страница. Это означает, что если при наведении указатель мыши наводит курсор на нее, содержимое внутри этого кадра также прокручивается, вместо того, чтобы продолжать перемещать новую «карточку» вверх по странице. Таким образом, вы попадаете в такой беспорядок, когда нижняя статья прокручивается до конца, но занимает только тонкую полоску пространства на странице:

i.stack.imgur.com / 9KSd4.png

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

Как бы я мог предотвратить прокрутку iframe, пока он не окажется сверху? Я полагаю, что решение заключается в том, чтобы как-то скрыть переполнение, но я не уверен, как бы я определил положение iframe на странице или как бы я изменил его прокручиваемость, как только он был в позиции.

Answer 1

Up On A Hill не использует iframes для достижения своего эффекта, и они на самом деле не предотвращают прокрутку . Фактически, способ, которым они достигают своего эффекта, состоит в том, чтобы перемещать все изображения вниз по странице синхронно с полосой прокрутки, временно отключая этот эффект в течение определенных интервалов. Это создает иллюзию, что прокрутка была отключена.

Нет способа, которым вы сможете сделать это только с помощью CSS. Мой совет

• Не используйте iframes (они могут усложнить задачу, как вы уже нашли).
• Посмотрите на HTML и JS Up On A Hill, чтобы увидеть, как они достигли того, что пытались сделать. Не укради, хотя укради это! Если вы спросите, может быть, они дадут вам разрешение на его использование.
• Используйте jQuery.
  • Пройдите несколько уроков.
  • Читайте о .scrollTop и. position (возможно, тоже .offset), так как они будут использоваться для расчета и установки их CSS-позиций на странице.