Ограниченная прокрутка для изображения

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

Пожалуйста, смотрите ниже ........ enter image description here

A: Мой мобильный веб-сайт содержит много контента, который превышает высоту окна

B: После того, как загружается страница, полный экран изображение отображается как плавающий слой поверх содержимого. Изображение превышает высоту окон

C: Когда пользователь прокручивает вниз, он может видеть нижнюю часть изображения, но не содержимое веб-сайта. Нижняя часть изображения никогда не должна отсоединяться от нижней части экрана, независимо от того, как пользователь пытается прокрутить вниз.

Могу ли я узнать, как я могу достичь C ??

Кроме того, в ситуации B иногда изображение не может превышать высоту экрана, если пользователь использует смартфон с большим экраном, в этом случае изображение должно быть зафиксировано в верхней части экрана и не прокручиваться.

Было бы лучше, если все вышеизложенное может быть достигнуто НЕ используя jquery. Однако, если это необходимо, тогда все еще хорошо ........

Большое спасибо.

источник

2013-10-12 Kit Ng

+1 для рисованного примера –

jQuery - это JavaScript. Вы всегда можете использовать чистый JavaScript вместо jQuery. – ComFreek

Хотя общий эффект возможен только с CSS, вам, вероятно, понадобится javascript для включения и выключения эффекта.

Основная идея заключается в использовании position: fixed и overflow: scroll на слой, содержащий изображение, в то время как bodyoverflow: hidden имеет. В этих условиях вы можете прокручивать содержимое наложения, но не тело.

Несмотря на то, что это работает на рабочем столе, на мобильном телефоне все немного отличается, и все содержимое будет отображаться, несмотря на overflow: hidden на body. Быстрая работа - это применить position: fixed к body. Я не знаю, является ли это предполагаемым поведением, но отлично работает как в Safari, так и в Chrome на iOS.

Markup очерчивает:

<body class="no-scroll"> 
    <section class="content"> 
    /* content here */ 
    </section> 

    <aside class="overlay"> 
    <img src="img.jpg"> 
    </aside> 
</body>

CSS:

.no-scroll { 
    overflow: hidden; 
    position: fixed; 
} 

.overlay { 
    overflow-y: scroll; 
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0; 
    display: none; 
} 

.overlay img { 
    width: 100%; 
    height: auto; 
} 

.no-scroll .overlay { 
    display: block; 
}

При этом вы можете использовать JavaScript, чтобы переключить класс no-scroll на body. Когда он там, переполненный контент скрыт, и видна overlay. Когда его там нет, скрывается overlay.

Вот пример эффекта (без.нет прокрутки класса и JavaScript, хотя, просто чтобы показать, что он работает):

Edit:

В приведенном выше примере, я дал overlay полупрозрачный фон и дал изображение внутри него max-width из 100%. Если вы хотите, чтобы весь экран был заполнен изображением, измените max-width на обычный width.

Edit 2:

В соответствии с просьбой, вот функция JQuery для переключения эффекта.

$(".close").click(function() { 
    $("body").toggleClass("no-scroll"); 
});

Просто дайте <button> или что-то имя класса close, и он будет переключаться эффект включения и выключения.

источник

2013-10-13 12:15:38

Этот ответ фантастичен! Большое спасибо = D –

Только вопрос о дополнении: возможно ли вернуть свойство body в нормальное состояние (удалить переполнение: скрытое и зафиксированное положение), когда пользователь закроет слой изображения? –

Да. Как я писал в своем ответе, вам, вероятно, придется использовать javascript. Поскольку вы говорили о jQuery, я приведу пример, используя его. Посмотрите мое обновление через минуту. –

Ограниченная прокрутка для изображения

ответ

Смежные вопросы