заставить изображение повторять Y с неограниченной прокруткой

0

Можно ли сделать repeat y изображения repeat y (вниз), пока пользователь продолжает прокручивать, он продолжает повторяться?

Я знаю, что можно повторить и отобразить x или y, но изображение остановится в конце браузера. Я ищу, чтобы он продолжался, пока вы продолжаете прокручивать вниз.

Предпочтительно CSS или HTML, если возможно

Это то, что я получил до сих пор, мне просто нужно знать, как заставить div продолжать неограниченное количество:

CSS:

.slide {
    width:30px;
    height:1000px;
    background-image:url(http://paulbourke.net/fractals/noise/noise2d.gif);
    background-repeat:repeat-y;
    margin:0 auto;
}

HTML:

<div class="slide"></div>

скрипка

  • 0
    Так что-то вроде jsfiddle.net/48k7d/1 ?
  • 0
    Не совсем. По сути, я хочу, чтобы изображение повторялось так же, как это делается на этом сайте (прошу прощения за пример на сайте) mileycyrustongue.com
Показать ещё 3 комментария
Теги:
image
repeat

2 ответа

1

Вероятно, невозможно создать HTML-элементы с неограниченной высотой. Тем не менее, вы можете использовать javascript для расширения элемента, когда пользователь прокручивается в нижней части.

Поделиться
0

С простым HTML это (теоретически) невозможно, потому что вы можете определить абсолютную высоту и минимальные значения высоты или просто использовать "авто", что автоматически оправдает высоту окна в зависимости от размера вашего контента.

Другая (теоретическая бесконечная прокрутка) может быть достигнута, если дать смешную высоту высот, например 100000px; Но это, конечно, не работает для браузера.

Вам понадобится какой-то Ajax, который реагирует на полосу прокрутки, достигнет дна, а затем "добавит" некоторый контент в окно, которое технически невидимо для пользователя.

Вы могли бы построить что-то вроде этого:

$(window).scroll(function () {
    //- 10 = desired pixel distance from the bottom of the page while scrolling)
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        var box = $("#myBoxId");
        //Just append some content here
        box.html(box.html() + "<br /><br /><br /><br /><br /><br /><br />");
    }
});

Таким образом, вы можете имитировать по крайней мере некоторый контент, который расширяется только тогда, когда пользователь прокручивается до конца (или делает его полезным и загружает некоторый контент с помощью Ajax/однако...)

Конечно, изображение, повторяющееся с повторением-y, также будет расширяться этим эффектом.

Поделиться
  • 0
    Пожалуйста, не называйте это «Ajax», когда вы говорите о Javascript. ;)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню