Главная » Файлы » SCRIPT UCOZ » Разное |
Ручной скроллинг как на IPhone и IPad
13.10.2012, 15:42 | |
![]() Скроллить страницу перетягиванием курсора весьма удобно. Еще одна доработка – это фон на «оттянутом» месте. Содержимое перетаскивается курсором вниз и вверх, но можно оттянуть наше содержимое больше нужного, на этом месте поставлен серый фон, как на IPhone и IPad. Это ставим в Нижнюю часть сайта Code <script type="text/javascript" src="/iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper'); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); /* * * * * * * * * * Use this for high compatibility (iDevice + Android) * */ document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false); /* * * * * * * * */ /* * * * * * * * * * Use this for iDevice only * */ //document.addEventListener('DOMContentLoaded', loaded, false); /* * * * * * * * */ /* * * * * * * * * * Use this if nothing else works * */ //window.addEventListener('load', setTimeout(function () { loaded(); }, 200), false); /* * * * * * * * */ </script> Это ставим там где будет работать скроллинг Code <div id="wrapper"> <div id="scroller"> <ul id="thelist"> <li>Пункт</li> <li>Пункт</li> <li>Пункт</li> <li>Пункт</li> </ul> </div> </div> Это ставим в CSS Code body { padding:0; margin:0; border:0; -webkit-user-select:none; -webkit-text-size-adjust:none; } #wrapper { position:absolute; z-index:1; top:0px; bottom:0px; left:0; width:100%; background:#222 url('black_linen.png'); overflow:auto; } #scroller { position:absolute; z-index:1; /* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); width:100%; padding:0; } | |
Просмотров: 417 | Загрузок: 0 | |
Всего комментариев: 0 | |