Верстання скролінга у багатьох верстальщиків забирало напевно багато нервів. Важко зробити скрол кросбраузерним, тому часто доводиться видумувати всякі речі, в обхід.

Пропоную читачам варіант скролінгу без скролу як такого, засобами 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

Comments are closed.