2013-04-20 5 views
0

Первое сообщение на StackOverFlow.com, позор, поскольку меня считают студентом-информатиком. Прежде всего, спасибо вам всем за помощь, которую вы уже предоставили мне по другому запросу, отвечая на мои собственные вопросы. Сегодня у меня есть свой собственный реальный вопрос, который, как название этой статьи, может быть трудно понять. Я, однако, как вызов.Вертикальная полоса прокрутки, которая перемещает содержимое вбок

</introduction> 

РЕЗЮМЕ: Использование содержимого сайта somethingmedia.co на художника/философии страниц; создайте более удобный дисплей с особым вниманием к мобильным устройствам.

МЕТОД: Переблокировать содержимое «div», чтобы быть практически встроенным и разрешить прокрутку. Пожалуйста, посетите здесь, чтобы получить четкое представление для [demo] и см. Ниже [a]

ИЗМЕНЕНИЕ: При использовании опций чувствительности прикосновении и удержания, как показано в [методе], также допускается прокрутка с помощью колеса мыши. Пожалуйста, см. [demo2] и ознакомьтесь с пояснениями [b] ниже.

ФУНКЦИОНАЛЬНОСТЬ: В дополнение к [методу] и [изменению], разрешить прокрутку также при перемещении пользователей самой полосы прокрутки страниц. За исключением (и здесь сложная часть), сделайте полосу прокрутки вертикальной, но только перемещайте содержимое влево и вправо. Полоса прокрутки отображается только на не мобильных устройствах (например, ПК/ноутбуки/Macintosh/и т. Д.).

ЗАКЛЮЧЕНИЕ: Мне нравится создавать веб-сайты, и хотя я никогда не занимался официальным классом для сайтов (начиная с шестого класса), я продолжаю изучать новые вещи, основываясь на том, что я нахожу уникальным и интересным. Поэтому мне любопытно узнать, есть ли способ реализовать этот дизайн простым и элегантным способом. Хотя мой опыт в области компьютерных наук ограничен Java и Python в школе, у меня есть независимый опыт в CSS, HTML, Java Script и немного CGI. Если у вас возникнут проблемы со мной, я спрашиваю вас: «Что такое мой первый шаг?»

</concept> 

объяснение [а]: code.comunicatek.com/en/tekslider_a_touch_focused_slider.html

объяснение [б]: css-tricks.com/snippets/jquery/horz-scroll-with-mouse- колесо/

+0

Вы пытаетесь напишите вам вопрос как официальный отчет? я чувствую, что сложнее понять ... –

ответ

0

вопрос немного сбивает с толком, но при условии, что вы на самом деле имеете в виду, «Как я могу иметь страницу, которая использует вертикальные полосы прокрутки для прокрутки страницы по горизонтали,» Я хотел бы попробовать что-то вроде этого:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Vertizontal Scrolling</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> 
    <script> 
     $(document).ready(function() { 
      $('#page-scroll').height($('#page-wrap').outerWidth()); 
      $(window).scroll(function() { 
       $('#page-wrap').css('left',-1 * $(window).scrollTop()); 
      }); 
     }); 
    </script> 

    <style type="text/css" style="display: none !important;"> 
     #page-wrap { 
      position:fixed; 
      left:0; 
      top:0; 
      z-index:10; 
     } 
     #page-scroll { 
      z-index:1; 
     } 
    </style> 

</head> 
<body> 

    <div id="page-scroll"> 
     <!--- intentionally empty ---> 
    </div> 

    <div id="page-wrap"> 
     <!--- really wide content goes here ---> 
    </div> 

</body> 
</html> 
Смежные вопросы