Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > горизонтальный скроллинг


Автор: Ctulhy 27.1.2010, 12:30
можно ли при горизонтальном скроллинге центировать страницу? ну, что б скролл был по середине страницы сразу.

Автор: WebMast 27.1.2010, 20:16
Смотри.. Я не знаю ничего кроме jquery и то не спец. Но у меня получилось при помощи плагина scrollTo вот так:

Подключаем сам фреймворк и плагин.
Код

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scroll-to.js"></script>


Теперь сам скрипт:
Код

$(document).ready(function(){var wid=($(document).width()-$(window).width())/2;$('body').scrollTo('body',{offset:{left:wid}});});


У меня сработало..

Автор: mcTep 27.1.2010, 21:11
Это можно и без jQuery сотворить, у объектов есть метод .scrollTo(xPosition, yPosition).

Автор: WebMast 28.1.2010, 10:59
mcTep, а можешь показать пример? Пожалуйста..

Автор: mcTep 28.1.2010, 16:07
Я немного погорячился, такого метода нет, есть свойства scrollLeft и scrollTop.

Вот пример: 
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
</head>
<body>
    <div style="width: 400px; height: 400px; overflow: auto;" id="wrap">
        <div style="width: 700px; height: 700px;" id="content">
            <h1 style="text-align: center; padding: 50% 0;">Hello World!</h1>
        </div>        
    </div>

    <script type="text/javascript">
        var wrap = document.getElementById('wrap');
        var content = document.getElementById('content');
        wrap.scrollLeft = (content.clientWidth - wrap.clientWidth)/2;
        wrap.scrollTop = (content.clientHeight - wrap.clientHeight)/2;
    </script>
</body>
</html>


А это для window
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
</head>
<body>
    <div style="width: 2000px;" id="wrap">
            <h1 align="center">Hello World!</h1>
    </div>

    <script type="text/javascript">
        var w = document.getElementById('wrap').clientWidth;
        window.scrollTo((w-window.innerWidth)/2, 0);
    </script>
</body>
</html>



Автор: Violator 28.1.2010, 17:16
mcTep, 
а ИЕ разве поймет данную конструкцию window.innerWidth ?

Автор: mcTep 28.1.2010, 19:02
Код

  var winW = window.innerWidth;
  var winH = window.innerHeight;

 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }


Автор: Violator 28.1.2010, 20:35
mcTep,
может все-таки document.documentElement.offsetWidth

Автор: mcTep 28.1.2010, 22:19
Напишите свой вариант, я не проверял в IE6. 

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