Скольжение всей веб-страницы - PullRequest
Новая
       1

Скольжение всей веб-страницы

7 голосов
/ 09 декабря 2010

Есть ли способ имитировать нативный переход и функциональность "скольжения целых страниц", как вы видите на iPhone, но вместо этого в веб-браузере?

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

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

Будут ли мне нужны слайды, сделанные в HTML5? Заранее благодарю за любую помощь!

Edit: я также думал о возможной настройке двух полноразмерных DIV рядом с одним, скрытым за страницей с «overflow: hidden», а затем с помощью CSS-переходов, чтобы нажать кнопку и затем переместить один DIV из экран и другой, но я понятия не имею, как это сделать.

Другая действительно сложная часть в том, что мои DIV-контейнеры должны быть динамическими и иметь 100% ширину и высоту. Я не могу использовать фиксированные размеры.

EDIT:

Используя функции scrollTo и localscroll, разработанные Ariel Flesler Мне удалось выполнить 99% того, что я ищу. Однако в самом конце разработки я столкнулся с огромным блокпостом. Вот изображение, которое, я надеюсь, поможет объяснить, что я пытаюсь сделать:

alt text

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

Если кто-то сможет это понять, я буду вам очень обязан!

(я бы опубликовал ссылку на то, что у меня есть, но не могу. Это конфиденциальная работа для компании)

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

EDIT Я работаю над рассмотрением всей этой информации. Я отвечу через пару дней. Спасибо всем за ваш вклад!

Ответы [ 10 ]

6 голосов
/ 17 декабря 2010

Я сейчас разрабатываю что-то, что может быть полезно для вас.Он использует бок о бок, которые вы рассматривали, но я обнаружил трудности в использовании ширины 100% из-за проблем с полосами прокрутки и различий в браузерах.Я преодолел это, установив ширину в javascript (jQuery), который предлагает кросс-браузерное решение (протестировано в IE7, IE8, FF, Chrome, Safari, Opera).

Не стесняйтесь брать как можно большеИсходный код, как вам нравится, проверив источник, и если вам нужно, чтобы я что-то рассказал вам, просто дайте мне знать.

http://madesignuk.com/uploader/

PS Я не уверен на 100% вправила размещения ссылки на мой личный сайт, поэтому, если это проблема для модераторов, пожалуйста, сообщите мне.

PPS Сайт находится в разработке, поэтому постарайтесь не издеваться надо мной: p

3 голосов
/ 24 декабря 2010

Вы можете сделать это, поместив элементы рядом друг с другом внутри контейнера с помощью overflow:hidden и просто переместив внутренние элементы.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Page Slide</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){
  var w = $(window).width();
  var h = $(window).height();
  var slides = $('.Slides > div');
  $('.SlideContainer').css({ height: (h-60) + 'px' });
  $('.Slides').css({ width: slides.length + '00%' });
  slides.css({ width: w + 'px' });

  var pos = 0;

  $('.Left').click(function(){
    pos--;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });
  $('.Right').click(function(){
    pos++;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });

});

</script>

<style type="text/css">

body { margin: 0; padding: 0; }

.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }

.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }

.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }

</style>

</head>
<body>

<div class="Header">
  absolutely positioned header
</div>

<div class="SlideContainer">
  <div class="Slides">

    <div class="Slide">
      <div class="Content">
        <h1>Slide 1</h1>
        <a href="#" class="Left">&laquo;</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 2</h1>
        <a href="#" class="Left">&laquo;</a>
        <a href="#" class="Right">&raquo;</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 3</h1>
        <a href="#" class="Right">&raquo;</a>
      </div>
    </div>

  </div>
</div>

<div class="Footer">
  absolutely positioned footer
</div>

</body>
</html>

Редактировать

Теперь jsfiddle снова работает, так что вы можете попробоватьэто здесь: jsfiddle.net / 9VttC

1 голос
/ 18 декабря 2010

Используйте атрибут scrollTop CSS: вы хотите прокрутить вниз 100 пикселей в основной области содержимого? Просто сделай это: 

var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);

Вторая строка состоит из jQuery, но просто запомните принцип: примените новое значение scrollTop к CSS вашего div_ main_content_area.

1 голос
/ 15 декабря 2010

Вы смотрели на LocalScroll ?Это сделает все хеш-ссылки прокручиваемыми внутри контейнера, который вы определяете.Вы должны будете установить ширину слайдов, так как вам нужно их плавать.

0 голосов
/ 18 декабря 2010

Просто в качестве теоретического примера, но я бы создавал статические HTML-страницы и использовал jQuery для загрузки с них контента (для обеспечения совместимости). Основной проблемой будет прокрутка.

Я использую jQuery для вычисления ширины браузера, задаю для нее ширину <body>, а затем задаю overflow: hidden. Затем просто создайте абсолютно позиционированный блок контента и сдвиньте их оба одновременно.

Я выложу некоторый код позже, но это то, с чего я бы начал (я, патетически некомпетентный скрипач JS).

0 голосов
/ 18 декабря 2010

Команда Google Chrome разработала 20 вещей, которые я узнал о браузерах и Интернете , что дает такой эффект.

0 голосов
/ 18 декабря 2010

Если я правильно понимаю, метод scrollTo работает, но только если вы измените положение: фиксированное на положение: относительное, что приводит к растяжению полосы прокрутки за пределы прокрутки div?

Не будетбыло бы легче поместить div-обертку вокруг основной области содержимого с верхним полем для учета верхнего и нижнего полей для учета нижнего колонтитула и установить для него overflow: scroll и использовать в нем функцию scrollTo?

0 голосов
/ 17 декабря 2010

Попробуйте подключаемый модуль JQuery Cycle.

http://jquery.malsup.com/cycle/

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

0 голосов
/ 10 декабря 2010

jQuery pageSlide - другая альтернатива.

0 голосов
/ 10 декабря 2010

Вы можете использовать что-то вроде Coda Slider , и содержание слайда будет всей страницей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...