VPF::горизонтальный скроллинг - Форум программистов

Ctulhy

Дата 27.1.2010, 12:30 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: 2
Всего: 2

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

Это сообщение отредактировал(а) Ctulhy - 27.1.2010, 18:04

--------------------

скучно в Москве и дождливо в Крыму.

WebMast

Дата 27.1.2010, 20:16 (ссылка)

(нет голосов)

Загрузка ...

Front-end developer

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2

Смотри.. Я не знаю ничего кроме 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}});});

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

--------------------

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

mcTep

Дата 27.1.2010, 21:11 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

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

WebMast

Дата 28.1.2010, 10:59 (ссылка)

(нет голосов)

Загрузка ...

Front-end developer

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2

mcTep, а можешь показать пример? Пожалуйста..

--------------------

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

mcTep

Дата 28.1.2010, 16:07 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Я немного погорячился, такого метода нет, есть свойства 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>

Это сообщение отредактировал(а) mcTep - 28.1.2010, 16:16

Violator

Дата 28.1.2010, 17:16 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

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

mcTep

Дата 28.1.2010, 19:02 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Код


  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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

mcTep,
может все-таки document.documentElement.offsetWidth

mcTep

Дата 28.1.2010, 22:19 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Напишите свой вариант, я не проверял в IE6.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »