2013-12-13 2 views
0

Можно ли сделать изображение repeat y (вниз), если пользователь продолжает прокручивать его, продолжает повторяться?сделать повтор изображения 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> 

Fiddle

+0

Итак, что-то вроде линий http://jsfiddle.net/48k7d/1/? –

+0

Не совсем. В принципе, я хочу, чтобы изображение повторялось так же, как и на этом веб-сайте (я приношу извинения за пример сайта) http://www.mileycyrustongue.com/ – man

+0

Я действительно не понимаю, каков ожидаемый результат – DaniP

ответ

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. ;) – pvgoran

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