1. 홈
  2. 질의 응답
  3. 전체 페이지가 아닌 개별 div 로의 수직 스크롤 제한

전체 페이지가 아닌 개별 div 로의 수직 스크롤 제한

2014-11-17 4 views
0

현재 웹 페이지에서 왼쪽에서 오른쪽으로 정렬 된 98 개의 div가 있으며 각 페이지는 개별적으로 다른 페이지에서 스크롤 할 수 있습니다. 그들은 포함하고있는 이미지 때문에 크기가 모두 다르지만 모두 웹 브라우저의 높이를 초과합니다. 아래쪽으로 스크롤하려면 전체 페이지를 트리거하지 않고 한 div의 맨 위에서 아래로 스크롤 할 수 있어야합니다.전체 페이지가 아닌 개별 div 로의 수직 스크롤 제한

다른 말로하면 div가 스크롤되고 브라우저 창이 동일한 위치에 유지되는지 확인하고 싶습니다. overflow:hidden을 사용하는 것과 비슷한 질문에 대한 제안을 많이 찾았지만 div 명령이 브라우저 창 크기를 초과 할 경우 명령이 스크롤을 무시하지 않습니다. 다음과 같이

내 코드의 기본 구조는 다음과 같습니다 내 전체 코드와 JSFiddle 링크를 첨부

<div class="container" id="one"><img src="strips/1.jpg" /></div> 

#one { 
    margin: 0px; 
    padding: 0px; 
    height: 7296px; 
    width: 172px; 
    border-width: 0px; 
    border-style: 0; 
    left: 0px; 
    top: 0px; 
    float:left; 
} 

$(document).scroll(function(){ 
    $('body').append($('#one').html()); 
});

(그것은 긴하지만 고도의 반복이다)과 내가하고있는 프로젝트에 대한 자세한 설명. 바라기를 이것은 충분한 정보를 제공합니다. 분명

http://jsfiddle.net/1uma0074/

출처

2014-11-17 Rica

답변

0

pls는 당신은 신체 내부의 콘텐츠 또는 개별 div의 스크롤합니다. 본문 내용이 다음 당신이 창문이 아닌 콘텐츠를 스크롤하려는 경우 문제를 해결합니다 다음을 포함하여 대구를 확장하십시오.

$(document).ready(function() { 
 

 
    window_h = $(window).height(); 
 
\t $('html').height(window_h); 
 
\t $('body').height(window_h); 
 

 
\t window_w = $(window).width(); 
 
\t $('html').width(window_w); 
 
\t $('body').width(window_w); 
 

 
});
html{ overflow: hidden;} 
 
body { overflow: scroll;}

출처

2014-11-17 05:05:38

0
  1. 은 각각 개별 용기 사업부
    <안녕, 시작 = "2">
  2. 높이를 추가 내부 하나, 둘 등 ... 이름 DIV 넣어 : 100 % ~ html {} 및 본문 {}
  4. 이 오버 플로우 - y를 추가 몸 {} 전에 점을 제거 및 플로트 스크롤 :
  5. 이 확인 .container {}에 속성을 왼쪽 높이 : 100 %에 대한 #everything {}
    6.

아래 코드를 확인하고 다른 모든 97 스크롤러를 구현하십시오.

-eheers!

$(document).scroll(function(){ 
 
    $('body').append($('#one').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#two').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#three').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#four').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#five').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#six').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#nine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ten').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eleven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twelve').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fifteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventeen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eighteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#nineteen').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twenty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#twentynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#thirtynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fourtynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fifty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#fiftynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#sixtynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventy').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#seventynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eighty').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightyeight').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#eightynine').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninety').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetyone').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetytwo').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetythree').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetyfour').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetyfive').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetysix').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetyseven').html()); 
 
}); 
 
$(document).scroll(function(){ 
 
    $('body').append($('#ninetyeight').html()); 
 
});
html{height:100%; } 
 
body { 
 
\t overflow:hidden; 
 
\t overflow-y: hidden; 
 
\t overflow-x:scroll; 
 
height:100%;  
 
} 
 

 
.horizontalscroll { 
 
\t overflow-x: scroll; 
 
\t overflow-y:hidden; 
 
} 
 

 
.container { 
 
\t overflow-y:scroll; 
 
    height:100%; 
 
    float:left; 
 
    
 
} 
 
\t 
 
#one { 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t width: 172px; 
 
\t border-width: 0px; 
 
\t border-style: 0; 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t float:left; 
 
    height: 7296px; 
 
    
 
} 
 

 
#everything { 
 
\t width: 9918px; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t height:100%; 
 
\t border-width: 0px; 
 
\t border-style: 0px; 
 
\t top: 0px; 
 
\t left: 0px; 
 
\t overflow-y: hidden; 
 
\t overflow-x: scroll; 
 
\t overflow:hidden; 
 
}
<div class="wrapper" id="everything"> 
 
    <div class="container"><div id="one"><img src="strips/1.jpg" /></div></div> 
 

 
</div>

출처

2014-11-17 16:34:23 vishnu

+0

당신을 감사합니다! @ user2758326 코드를 적용했는데 내 페이지가 더 이상 아래로 스크롤되지 않고 (예!) 더 이상 가로로 스크롤되지 않습니다.이를 해결하려면 어떻게해야합니까? 또한 명확하게하기 위해, 윈도우가 동일한 위치에있는 동안 98 div의 각각을 개별적으로 스크롤 할 수 있기를 원합니다. 또한 모든 98 div에 액세스하려면 가로로 스크롤 할 수 있어야합니다. 도와 줘서 고마워! – Rica

+0

환영합니다! @ 리카. 너는 너의 위치/jsfiddle을 위해 연결을 배치 하십시요. 그래서 나는 그 문제를 쉽게 고칠 수있다. – vishnu

+0

일부 시행 착오를 통해 문제가 높이 조합 : 100 % 및 오버플로 : css html 태그 아래에 있음을 발견했습니다. 그러나 두 스타일 중 하나를 제거하면 페이지가 양방향으로 스크롤됩니다. overflow-y : hidden과 overflow-x : scroll을 지정해 보았습니다.하지만 여전히 두 방향으로 스크롤 할 수있었습니다. 나는 여전히 수평으로 스크롤 할 수있는 동안 페이지의 수평 위치를 일정하게 유지하고 싶다. 여기에 내 코드와 내 프로젝트에 대한 간략한 설명이 있지만 경고는 매우 반복적입니다. 모든 도움을 주셔서 감사합니다! http://jsfiddle.net/1uma0074/18/ – Rica

관련 문제

 관련 문제