Верстання скролінга у багатьох верстальщиків забирало напевно багато нервів. Важко зробити скрол кросбраузерним, тому часто доводиться видумувати всякі речі, в обхід.
Пропоную читачам варіант скролінгу без скролу як такого, засобами JavaScript.
І так поміщаємо один div в інший div. Внутрішній матиме ширину більшу ніж зовнішній.
HTML
<div class="div1"> <div id="noscroll" class="div2" id="noscroll"> <span class="element"> element </span> </div> </div> <a href="#" onclick=scroll_model(1)">-->></a> <a href="#" onclick="scroll_model(-1)"><<--</a>
CSS
.div1 { width: 500px; } .div2 { width: 2000px; } .element { float: left; margin: 10px; }
JavaScript
setInterval('gogo()', 20) ; var now_pos=0; var old_pos=0; function scroll_model(pos) { if (now_pos<2000) { now_pos = now_pos + 200*pos; if (now_pos>200) now_pos = 200; } } function gogo() { if (window.old_pos>window.now_pos) window.old_pos = window.old_pos - 10; if (window.old_pos<window.now_pos) window.old_pos = window.old_pos + 10; document.getElementById('noscroll').style.margin="0px 0px 0px "+window.old_pos+"px "; } function pause(milliseconds) { var dt = new Date(); while ((new Date()) - dt <= milliseconds) { /* Do nothing */ } }
gogo() i pause() функції створені для плавного переміщення внутрішнього div, який як мабуть Ви здогадалися із коду переміщається ліворуч-праворуч створюючи ілюзію скролінгу елементів.
Результат можна глянути на одному із сайтів, до створення якого я доклався: shootcast.info