垂直滾動條，橫向移動內容

StackOverFlow.com上的首次發帖，我被認爲是計算機科學專業的學生，這是一種恥辱。首先，非常感謝您通過其他人的詢問回答了我自己的問題，爲您提供的幫助。今天我有我自己真正的問題，喜歡這個職位的標題可能很難理解。我不過是一個挑戰。垂直滾動條，橫向移動內容

</introduction>

摘要：在藝術家/哲學頁面上使用網站somethingmedia.co的內容;特別考慮移動設備，創建更加用戶友好的顯示屏。

方法：ALTER阻塞「DIV」含量爲幾乎直列並允許側滾動。請訪問這裏明確表示，以[demo]，看看下面的解釋[A]

維修：同時允許觸摸並保持靈敏度選擇在[方法]看到還允許用鼠標滾輪來進行滾動。請參閱[demo2]並訪問下面的解釋[b]。

功能性：除了[方法]和[變更]，允許滾動時用戶的頁面的運動也發生滾動條本身。除了（這裏是棘手的部分），使滾動條垂直，但只是左右移動內容。滾動條僅在非移動設備上可見（即PC /筆記本電腦/ Macintosh /等）。

結論：我喜歡做的網站，雖然我從來沒有采取正式上課的網站（因爲6年級）我繼續學習基礎是什麼，我覺得獨特而有趣的新事物。因此，我很想知道是否有方法以簡單優雅的方式實現這一設計。雖然我的計算機科學經驗僅限於學校的Java和Python，但我在CSS，HTML，Java Script和一些CGI方面擁有獨立的經驗。如果你願意接受我的挑戰，我會問你：「我的第一步是什麼？」

</concept>

解釋並[a]：code.comunicatek.com/en/tekslider_a_touch_focused_slider.html

解釋並[b]：css-tricks.com/snippets/jquery/horz-scroll-with-mouse-輪/

來源

2013-04-20 user2301308

你想要把你的問題寫成正式的報告？我感覺很難理解...... – 2013-04-20 13:12:02

的問題是有點混亂，但假設你真正的意思是，「我怎樣纔能有一個使用垂直滾動條水平滾動頁面的網頁，」我想嘗試這樣的事：

<!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>

來源

2013-10-12 09:16:33 webeye

垂直滾動條，橫向移動內容

回答

相關問題