수평 스크롤 사이트

나는 매우 같은 사이트를 만들려고 해요이 그림에서 :수평 스크롤 사이트

문제 :

내가하는 사이트가 필요합니다 이미지에서 제안 된대로 가로로 스크롤하십시오.
스크롤 할 때 수직으로 스크롤하는 요소가 필요하지만 전체 요소가 아닌 요소 자체 내부에 있어야합니다. 사이트의 첫 번째 프레임에서 위/아래로 스크롤하면 두 번째 프레임이 너무 크고 전체 사이트가 가장 높은 요소만큼 키가 크기 때문에 빈 영역으로 스크롤됩니다.

HTML 구조 :

div #horizontal-container 
    div #horizontal-wrapper 
     div #section-1 .section 
     div #section-2 .section 
     div #section-3 .section 
     so on...

CSS :

html, body { overflow: hidden; } #horizontal-container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow-y: hidden; overflow-x: scroll; } #horizontal-wrapper { width: 400%; height: 100%; } .section { width: 25%; /* A quarter of its parent with 400%, to be 100% of the window. */ height: 100%; float: left; overflow-y: scroll; }

가 잘하면 내가 여기 분명히했다. 이 기능을 사용하기 위해서는 무엇을 놓치고 있습니까? 특정 가로 스크롤 점에 맞을 때 컨테이너의 overflow 속성을 토글하려면 약간의 JavaScript를 통합해야합니까? 지저분 해 보인다. :/

출처

2012-12-07 Andy Merskin

일부 jquery 모듈이 필요합니다. – bgmCoder

높이 = 100 % 섹션

당신이 내용에 따라 섹션에 다른 높이를 지정해야

에 스크롤을 소개하지 않습니다.

javascript로 확인하십시오. 섹션의 높이가 창 높이 이상이면 섹션 높이에 창 높이를 지정하십시오.

출처

2012-12-07 04:57:28

JavaScript 없이도이 작업을 수행하려고 노력하고 있지만 제대로 작동하는 솔루션을 찾을 수있었습니다. 아래 답변을 확인하십시오. 귀하의 제안에 감사드립니다! –

** 해결책 : ** http://jsfiddle.net/RCJuX/ 상단 컨테이너 요소에서 고정 된 높이를 설정하고 'height : 100'을 사용하여 트리 아래로 전달해야했습니다. % '를 찾습니다. 그래서 어떤 종류의 고정 된 ** 높이가있는 한, 잘 작동하는 것 같습니다. –

이 코드를 사용하면 가로 스크롤러가있는 고정 폭 콘텐츠 블록을 생성 할 수 있습니다. 부모 게시글을 볼 수 있습니다.

<html> 
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title> 
<head> 
<style type="text/css"> 
#outer_wrapper { 
    overflow: scroll; 
    width:100%; 
} 
#outer_wrapper #inner_wrapper { 
    width:6000px; /* If you have more elements, increase the width accordingly */ 
} 
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */ 
    width: 250px; 
    height:300px; 
    float: left; 
    margin: 0 4px 0 0; 
    border:1px grey solid; 
} 
</style> 
</head> 
<body> 

<div id="outer_wrapper"> 
    <div id="inner_wrapper"> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <div class="box"> 
      <!-- Add desired content here --> 
      HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
     </div> 
     <!-- more boxes here --> 
    </div> 
</div> 
</body> 
</html>

출처

2014-02-11 18:03:36 FrameWorker

수평 스크롤 사이트

답변

관련 문제