Chrome и другие браузеры имеют прокрутку (также называемую эластичной прокруткой или прокруткой резиновой ленты) для элемента html. (См. здесь или здесь.)
Я хочу изображение в html overscroll как пасхальное яйцо, немного похожее на Slack для пасхального яйца iOS. (См. "Вы обновлены" на скриншоте.)
CSS
html {
background: green;
}
дает переполнение цвета. Изображение не работает:
html {
background: url(image.png);
}
Как я могу поместить изображение в переполнение html?
Вы можете достичь этого результата на Safari (этого я не смог добиться в других браузерах).
<html>
<body>
<div class="body-wrapper">
Content goes here
</div>
</body>
</html>
/* --- Reset rubber effect on the 'html' tag --- */
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
/* ------------ end reset ------------ */
html {
background-color: white;
background-image: url("http://www.freebordersandclipart.com/images/EasterEggThree.png");
background-repeat: no-repeat;
background-size: 6%;
background-attachment: fixed;
background-position: 50% 10px;
}
.body-wrapper {
background-color: white;
}
Вы должны удалить эффект резины по умолчанию для элемента html (поскольку вы не можете поместить графику в родительский элемент html - родитель html не существует).
body имеет резиновый эффект и прозрачный фон - недостаток фона важен, поскольку резиновый эффект расширяет этот цвет и может перекрывать графику пасхального яйца. .body-wrapper имеет цвет фона, чтобы скрыть пасхальное яйцо.
Здесь вы можете увидеть эффект (на рабочем столе он работает только на Safari).
Существует такое кросс-браузерное сенсорное решение, которое должен знать каждый сторонний разработчик: iScroll by Matteo Spinelli (http://cubiq.org/iscroll-5).
Он создал кросс-браузерное моделирование эффекта резиновой ленты, которое является полностью стильным. iScroll можно использовать для этой цели (как и многие другие). Я лично использую его в основном для создания переполнения на div в мобильных устройствах, поскольку они обычно не разрешены.
Вот пасхальное яйцо старой школы, использующее фоновое изображение на #wrapper: http://codepen.io/anon/pen/OXMmgr... JIPPY....JIPPY JIPPY JIPPY!
PS. Если вы хотите что-то, что работает на "обычной" прокрутке прокрутки, попробуйте это репо: https://github.com/ftlabs/ftscroller
Попробуйте это, он может решить вашу проблему (y)
html {
background: url(image.png);
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
Это может сработать, сделанное для меня:
body {
background: white;
height: 100%;
overflow: auto;
}
html {
overflow: hidden;
height: 100%;
background: url("http://www.planwallpaper.com/static/images/background-wallpapers-26.jpg");
}
Возможно, вам стоит попробовать:
html {
background-color: 'yourcolor';
}
html {
background-image: 'your image';
}
потому что, когда вы используете background property, вы перезаписываете то, что вы написали ранее. Он даст значение по умолчанию почти для всех background properties. Было бы просто установить ваши background-image и background-color отдельно, , но для других типов поведения, таких как repeat, position, attachment и etc, пожалуйста, оставьте комментарий, чтобы я знал, что еще является вашей проблемой.
Я построил для этого ручку, → http://codepen.io/CodeHero/pen/PzZdZW
Ну, я построил там ящик и дал ему несколько background property и перезаписал все это, используя background : blue;.
Это простой пример, но вы можете убедиться, выполнив следующие шаги. Вы можете щелкнуть правой кнопкой мыши на синем поле и выбрать опцию inspect element, и она откроет для вас окно проверки, которое вы можете увидеть на части css на справа от него, и если вы посмотрите внимательно, вы увидите, что он пересек линию в первом css selector property, а потому, что я использовал background вместо background-color.
Вам не нужно вручную создавать его, так как есть много плагинов js, которые уже выполняют эту работу. Лучшая библиотека для этого, я думаю, в целом. Js
Вот ссылка https://github.com/tholman/overscroll
Я уверен, это то, что вы искали.
Я внес некоторые изменения в код Everettss, чтобы он работал во всех браузерах.
Я использовал background-clip: content-box, чтобы ограничить цвет фона самим содержимым, вместо того, чтобы влиять на заполнение. Вот код:
var body = document.querySelector('.body-wrapper');
body.addEventListener('scroll', function(e){
var scrollTop = this.scrollTop;
if(scrollTop === 0){
this.style.paddingTop = "50px";
this.style.height = "calc(100% - 50px)";
setTimeout(function(){
this.style.paddingTop = "0px";
}.bind(this), 700);
this.style.height = "";
}
else{
this.style.paddingTop = "0px";
this.style.height = "";
}
})/* --- reset rubber effect on html --- */
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: hidden;
}
/* ------------ end reset ------------ */
html {
background-color: white;
background-image: url("http://www.freebordersandclipart.com/images/EasterEggThree.png");
background-repeat: no-repeat;
background-size: 6%;
background-attachment: fixed;
background-position: 50% 10px;
}
.body-wrapper {
background-image: linear-gradient(white, white);
background-clip: content-box;
background-attachment: scroll;
height: 100%;
transition: padding .7s linear, height .7s linear;
overflow: auto;
}<div class="body-wrapper">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, architecto consectetur cupiditate deserunt dolor dolorem dolores in itaque modi odio, ratione suscipit voluptatem. Accusamus alias corporis debitis veniam vero voluptatem.</span><span>Eligendi in magni quod reiciendis rerum! Aut corporis nihil nostrum reiciendis saepe. Accusamus commodi dolores neque officia omnis pariatur sequi suscipit ullam veritatis! Ab, adipisci earum facere fuga temporibus voluptates?</span><span>Amet, doloremque, quo! Autem harum illo iusto. Blanditiis commodi, consectetur cupiditate delectus dolore, eveniet facere natus necessitatibus nemo numquam quidem reprehenderit repudiandae veniam. Aperiam dolores eaque ipsam quisquam reiciendis, vel.</span><span>A ab at atque blanditiis cupiditate eaque eligendi est fugit illo inventore laborum maiores minima molestiae nihil non quaerat, quam quasi qui rem rerum sint sit unde veniam vitae voluptatum!</span><span>Ad ea molestias perspiciatis repellat. Accusamus adipisci aliquid animi aspernatur doloremque ducimus et excepturi expedita facilis, id libero modi molestiae omnis quibusdam quisquam, repellat sequi similique veniam vero voluptatibus voluptatum.</span><span>Alias aliquid amet aspernatur blanditiis culpa cumque dolorum earum eligendi et explicabo illum ipsa iure labore minima natus nemo optio, possimus, praesentium quam quibusdam quisquam quos sunt suscipit unde velit?</span><span>Cumque earum facilis ipsa odio officiis reiciendis tenetur. Aliquid debitis dolor facere fugit, incidunt, ipsa ipsum nemo nihil nisi omnis optio perspiciatis, quisquam repellat sapiente similique temporibus ut veritatis voluptas?</span><span>Architecto, labore, nostrum! Aliquam aliquid animi cumque ea eaque eveniet ipsa iste laudantium magni maiores molestias mollitia nemo nulla obcaecati, omnis optio placeat porro possimus ratione rem vel, voluptate voluptates.</span><span>Ad aperiam architecto asperiores assumenda aut beatae consequuntur corporis delectus deleniti dolor doloremque eius eos eum exercitationem harum iusto molestias nesciunt nulla omnis, praesentium quam quas quidem quisquam soluta, veniam!</span><span>Atque blanditiis debitis error est expedita minima molestias nam officia veniam, voluptates. A ipsum mollitia quibusdam rerum tempora. Cum deleniti fugit itaque maiores minima nisi obcaecati possimus quidem sit voluptatem.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, architecto consectetur cupiditate deserunt dolor dolorem dolores in itaque modi odio, ratione suscipit voluptatem. Accusamus alias corporis debitis veniam vero voluptatem.</span><span>Eligendi in magni quod reiciendis rerum! Aut corporis nihil nostrum reiciendis saepe. Accusamus commodi dolores neque officia omnis pariatur sequi suscipit ullam veritatis! Ab, adipisci earum facere fuga temporibus voluptates?</span><span>Amet, doloremque, quo! Autem harum illo iusto. Blanditiis commodi, consectetur cupiditate delectus dolore, eveniet facere natus necessitatibus nemo numquam quidem reprehenderit repudiandae veniam. Aperiam dolores eaque ipsam quisquam reiciendis, vel.</span><span>A ab at atque blanditiis cupiditate eaque eligendi est fugit illo inventore laborum maiores minima molestiae nihil non quaerat, quam quasi qui rem rerum sint sit unde veniam vitae voluptatum!</span><span>Ad ea molestias perspiciatis repellat. Accusamus adipisci aliquid animi aspernatur doloremque ducimus et excepturi expedita facilis, id libero modi molestiae omnis quibusdam quisquam, repellat sequi similique veniam vero voluptatibus voluptatum.</span><span>Alias aliquid amet aspernatur blanditiis culpa cumque dolorum earum eligendi et explicabo illum ipsa iure labore minima natus nemo optio, possimus, praesentium quam quibusdam quisquam quos sunt suscipit unde velit?</span><span>Cumque earum facilis ipsa odio officiis reiciendis tenetur. Aliquid debitis dolor facere fugit, incidunt, ipsa ipsum nemo nihil nisi omnis optio perspiciatis, quisquam repellat sapiente similique temporibus ut veritatis voluptas?</span><span>Architecto, labore, nostrum! Aliquam aliquid animi cumque ea eaque eveniet ipsa iste laudantium magni maiores molestias mollitia nemo nulla obcaecati, omnis optio placeat porro possimus ratione rem vel, voluptate voluptates.</span><span>Ad aperiam architecto asperiores assumenda aut beatae consequuntur corporis delectus deleniti dolor doloremque eius eos eum exercitationem harum iusto molestias nesciunt nulla omnis, praesentium quam quas quidem quisquam soluta, veniam!</span><span>Atque blanditiis debitis error est expedita minima molestias nam officia veniam, voluptates. A ipsum mollitia quibusdam rerum tempora. Cum deleniti fugit itaque maiores minima nisi obcaecati possimus quidem sit voluptatem.</span>
</div>Вам совсем не нужно изменять свой HTML. Просто поместите псевдоэлемент под страницу.
body {
height: 3000px;
position: relative;
overflow: visible;
}
body::after {
display: block;
background-image: url(//getuikit.com/docs/images/placeholder_200x100.svg); /* Placeholder image */
position: absolute;
top: 100%;
left: 50%; /* Centers image horizontally */
margin-left: -100px; /* Half the width */
width: 200px; /* Any width you need */
height: 100px; /* Any height you need */
}
body {
height: 3000px;
position: relative;
overflow: visible;
}
body::after {
display: block;
background-image: url(//placeholdit.imgix.net/~text?txtsize=19&bg=000080&txtclr=ccccff&txt=200×100&w=200&h=100); /* Placeholder image */
position: absolute;
top: 100%;
left: 50%; /* Centers image horizontally */
margin-left: -100px; /* Half the width */
width: 200px; /* Any width you need */
height: 100px; /* Any height you need */
}<html>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia elit augue, quis congue velit lacinia eget. Curabitur nec congue nunc. Sed sit amet molestie mauris. Duis in urna imperdiet, placerat purus a, rutrum nulla. Morbi congue ante a iaculis fermentum. Integer ornare consequat risus, sed venenatis est sodales quis. Sed finibus nulla velit, nec varius ex aliquet ac. Nulla enim lectus, euismod nec mi in, pretium sollicitudin nibh. Nunc ex leo, congue ac elit eu, dapibus fermentum dolor. Fusce sit amet viverra orci, et pharetra purus. In gravida, leo et consequat tristique, arcu arcu suscipit justo, at suscipit libero leo vitae massa.
In tincidunt condimentum odio non pharetra. Morbi sit amet purus vel nibh feugiat tincidunt. Phasellus commodo libero non arcu dictum, ut consectetur dolor dictum. Maecenas rutrum dolor ac rhoncus imperdiet. Vivamus in augue eu ante vehicula ornare quis et erat. Nullam nec aliquet nulla. Suspendisse non turpis in orci blandit viverra.
Morbi hendrerit, odio ut efficitur ultricies, orci nisi pretium tellus, a rutrum turpis felis a mi. Sed pellentesque blandit mauris, nec tristique ipsum rhoncus ullamcorper. Mauris efficitur feugiat dignissim. Aenean faucibus erat ut commodo malesuada. Curabitur tempor diam vitae hendrerit tincidunt. Morbi sit amet augue turpis. Aenean nec egestas sem. Quisque lacinia semper magna, id consequat augue eleifend id. Phasellus tincidunt euismod dui, id vestibulum lorem eleifend et. Integer hendrerit turpis sed ante vulputate, non malesuada neque consectetur. Cras dui felis, posuere ac risus non, tincidunt molestie sem. Duis consectetur ultricies enim, eu lacinia metus rhoncus a. Quisque accumsan porta lectus sit amet tempor. In imperdiet dapibus risus et placerat. Etiam pretium magna urna, quis egestas mauris tincidunt non.
Mauris egestas vel augue vitae interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel odio orci. Duis quis magna ante. Suspendisse a eros et lacus dignissim lobortis quis nec mi. Pellentesque non egestas metus, vel efficitur nisi. Phasellus a nunc in eros tristique commodo sit amet nec dolor. Donec blandit magna sit amet mauris dictum congue. Fusce tempus, turpis non congue pulvinar, risus dui mattis metus, eget malesuada ex lectus non nibh. In finibus lacus eu sem accumsan, viverra pharetra justo euismod. Morbi mollis molestie felis quis elementum. Proin eget eros nec felis faucibus ullamcorper. Curabitur dapibus augue sed leo blandit, sit amet tempus lorem imperdiet. Suspendisse pellentesque sapien vitae velit bibendum, eget fringilla urna suscipit.
Praesent in tellus quis arcu porta lobortis. Sed nulla metus, sodales eget iaculis eget, facilisis sit amet nulla. Mauris sagittis metus quis lectus dictum accumsan. Donec consectetur dui eget enim suscipit, ac porttitor urna ultrices. Phasellus tempor pharetra magna, sit amet malesuada lectus rutrum ultricies. Nam imperdiet vestibulum diam, a ullamcorper purus volutpat nec. Aenean pharetra ullamcorper suscipit. Donec molestie lobortis facilisis. Vivamus laoreet dapibus placerat. Duis luctus ligula felis, vitae eleifend turpis maximus a. Aliquam fringilla elit maximus diam sagittis volutpat. Vestibulum erat magna, commodo a tortor vel, efficitur aliquet ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis hendrerit mollis. Vestibulum vitae ante vel velit ultricies efficitur. Duis tincidunt semper consectetur.
<h1>Keep scrolling down!</h1>
</body>
</html>