Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > скроллирование div'а без полосы прокрутки


Автор: AzuManga 3.3.2006, 10:31
Зравствуйте 8))

У меня есть див с кучей ссылок, высотой примерно в 500px, но видимая область должна содержать около пяти ссылок и иметь высоту 170px. Можно ли сделать с помощью JS скроллирование видимой области этого дива так, чтобы не было никаких полос прокрутки?

Спасибо за внимание 8)

Автор: Zaman 3.3.2006, 15:02
http://www.woweb.ru/js/scripts/teffects/003/ - здесь склоллирующий текст

Автор: AzuManga 3.3.2006, 16:26
огромное спасибо, только получилась загвоздка как всегда 8((

Я упростил код для тестирования и пришел к этому:

Код

<script language="javascript" type="text/javascript">
var y=0

function moveUp(){
    y = y - 26;
    document.getElementById('fourthlinkstext').style.top = y;
}

function moveDown(){
    y = y + 26;
    document.getElementById('fourthlinkstext').style.top = y;
}
</script>


Код

#fourthlinks    {width:325px;    height:80px; float:left; clip:rect(0px 325px 80px 0px); overflow:hidden}
#fourthlinkstext { position:relative; left:0px; top:0px;} 


Код

<div id="fourthlinks">
        <div id="fourthlinkstext">
    <p>text text text text text text text text text text text 
         text text text text text text text text text text text text text text </p>
    </div>
</div>




при нажатии на дивы расположенные на странице я вызываю функции moveUp и moveDown.
В опере в ИЕ скроллинг работает, но в ИЕ внутренний див с текстом не обрезается клипом внешнего дива и вылезает за его границы 8((((

Посоветуйте, пожалуйста, выход 8)


Прим. Простите, оказалось, что бага лечится удалением доктайпа из страницы 8))

Автор: Sardar 4.3.2006, 23:48
AzuManga, нет, убирание доктайпа (введение в quirksmode) есть очень плохая штука в вёрстке, т.к. не известно как такая страница поведёт себя на не ИЕ браузере.

Стиль clip возможно естественный на первый взгляд, но лучше вкладывать слой в другой слой со стилем overflow: hidden.

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
<style type="text/css">
.outer_clip {
  position: relative;
  width: 200px;
  height: 80px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.clip_layer {
  position: absolute;
  width: 200px; /* chto by za ramki ne vyshlo */
  left: 0px;
  top: 0px;
}
</style>

<script type="text/javascript">
<!--

function rollUp() {
  var e=document.getElementById('my_layer');
  var stop = (e.offsetTop - 10) 
  e.style.top = ((stop > (-e.offsetHeight))? stop: -e.offsetHeight) + 'px';  
}

function rollDown() {
  var e=document.getElementById('my_layer');
  var stop = (e.offsetTop + 10)
  e.style.top = ((stop < 0)? stop: 0) + 'px';
}
//-->
</script>
</head>

<body>
<div class="outer_clip">
     <div class="clip_layer" id="my_layer">
         begin
         text text text text text text text text text text text 
         <br>text text text text text text text text text text text
         midden
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
         <br>text text text text text text text text text text text
    </div>
</div>
<button onclick="rollUp()">Up</button><button onclick="rollDown()">Down</button>

</body>
</html>

Тег marquee очень хорош в такой ситуации, но мозилла не будет его исполнять если вывести браузер из quirksmode (поставить любой правильный доктайп), т.к. сей тег ни в какую спецификацию от W3C не входит. Все остальные браузеры такой дотошностью не страдают.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)