Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Горизонтальная прокрутка, прокрутка колесиком мыши 
V
    Опции темы
manson
Дата 13.1.2011, 13:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Добрый день! Может у кого есть ссылка на готовый пример для гаризонтальной прокрутки колесом мыши?
Погуглил, но пока не могу решить проблему... заранее благодарен...
PM MAIL   Вверх
neoks
Дата 13.1.2011, 18:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



В css пишеш overflof:auto, но тут появляются горизонтальные и вертикальный полосы прокрутки.
Если тебе не подходит, значит толь ка скрипт.
Хотя и не обязательно скрипт, все можно решить и в css, недавно я себе делал такое и обошелся без скрипта. smile 
PM MAIL   Вверх
Amphiluke
Дата 13.1.2011, 20:36 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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



neoks, ИМХО, вы невнимательно прочли сообщение ТС. Он хочет прокручивать страницу колесом мыши по горизонтали. CSS-ом тут не отделаешься.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    window.onload = function() {
        var html = document.documentElement;
        if (html.attachEvent) {
            html.attachEvent("onmousewheel", function() { event.returnValue = false; html.scrollLeft -= event.wheelDelta; });
        } else {
            html.addEventListener("DOMMouseScroll", function(e) { e.preventDefault(); html.scrollLeft += e.detail; }, false);
        }
    }
</script>
</head>

<body>
    <div style="width:2500px; background:red; height:75px;"></div>
</body>
</html>

PM   Вверх
neoks
Дата 13.1.2011, 22:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



Упс не увидел, бывает  smile 
PM MAIL   Вверх
manson
Дата 17.1.2011, 15:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Amphiluke, спасибо, толковый пример. Вот только с кроссбраузерностью непонятно пока выходит. В осле, опере - работает класно. В мозиле - скролится очень медленно (то есть нужно долго крутить чтоб хоть чутть здвинуться). А вот в хроме походу ваще не работает.
PM MAIL   Вверх
Amphiluke
Дата 17.1.2011, 21:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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



Вот вам типа кроссбраузерный вариант. smile 
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    var wDelta = 120;
    function scrollDoc(e) {
        if (!e) e = event;
        if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
        var __delta = e.wheelDelta || -e.detail;
        __delta /= Math.abs(__delta);
        document.documentElement.scrollLeft -= __delta * wDelta; // FF, Opera, IE
        if (this.attachEvent) return false;
        document.body.scrollLeft -= __delta * wDelta; // Chrome
    }
    window.onload = function() {
        var html = document.documentElement;
        if (html.attachEvent) {
            html.attachEvent("onmousewheel", scrollDoc); // IE and Opera
        } else {
            html.addEventListener("DOMMouseScroll", scrollDoc, false); // FF
            html.addEventListener("mousewheel", scrollDoc, false); // Chrome
        }
    }
</script>
</head>

<body>
    <div style="width:2500px; background:red; height:2500px;"></div>
</body>
</html>


Это сообщение отредактировал(а) Amphiluke - 17.1.2011, 21:19
PM   Вверх
manson
Дата 18.1.2011, 13:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



да, реально кроссбраузерный. Amphiluke, спасибо. По сравнению с тем что выдает гугл, ваш вариант на голову выше...
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0621 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.