작은 스크롤바 플러그인 - overview-div 고정 너비에도 불구하고 줄입니다.

저는 그림 앨범을보기 위해 Jquery와 함께 작은 스크롤바 플러그인을 사용하고 있습니다. 그것은 하나의 포장 문제를 제외하고는 잘 작동합니다.작은 스크롤바 플러그인 - overview-div 고정 너비에도 불구하고 줄입니다.

예 : 당신은 아마 단일 행에 배치되어 있지 않은 (또는 오히려 이미지가 포함 된 div의) 이미지를 볼 수 있듯이 http://67.23.251.125/~emelieze/test/index.php?t=collage&p=collage/Test&scroll=yes

, 그들이 그렇게 만 오른쪽으로 스크롤 할. overview-div는 고정 너비와 높이를 가지고 있지만 뷰포트 -div (검은 색 테두리는 분명하게 나타납니다)로 래핑됩니다. overview-div의 너비는 php로 계산되므로 스타일 시트에 넣는 것은 옵션이 아닙니다 .

스크롤바-DIV과 콘텐츠의는 다음과 같습니다

이

<div id='scrollbar2' > 
<div class='viewport' style='height: 330px; '> 
    <div class='overview' style='width: 2560px; height: 330px; '> 

    <div class='scrollimage' style='width: 500px;'> 


    <img src='cms/album/collage/Test/blue.png'> 
    <br> 
    example 3</div>  
    <div class='scrollimage' style='width: 500px;'> 


    <img src='cms/album/collage/Test/green.png'> 
    <br> 
    example 5</div>  
    <div class='scrollimage' style='width: 500px;'> 


    <img src='cms/album/collage/Test/orange.png'> 
    <br> 
    example 1</div>  
    <div class='scrollimage' style='width: 500px;'> 


    <img src='cms/album/collage/Test/red.png'> 
    <br> 
    example 4</div>  
    <div class='scrollimage' style='width: 500px;'> 


    <img src='cms/album/collage/Test/yellow.png'> 
    <br> 
    example 2</div> 

    </div> 
    </div> 

    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div></div></div></div>

CSS의 : 머리 태그 내부

#scrollbar2 { margin: 0px auto 40px auto; clear: both;} 
#scrollbar2 .viewport { overflow: hidden; position: relative; } 
#scrollbar2 .overview { list-style: none; padding: 0; margin: 0; position: absolute; border: 1px solid black; overflow: hidden;} 
#scrollbar2 .scrollbar { position: relative; overflow: hidden; margin: 0px; clear: both; height: 15px; } 
#scrollbar2 .track { background-color: #EEE; height:4px; position: relative; padding: 0px; } 
#scrollbar2 .thumb { background-color: #CCC; background-position: 100% -15px; height: 4px; cursor: pointer; overflow: hidden; position: absolute; left: 0; top: 0px; } 
#scrollbar2 .thumb .end{ overflow: hidden; background-position: 0 -15px; height: 13px; width: 5px;} 
#scrollbar2 .disable { display: none; } 

.scrollimage {float: left; border: 0px solid #000; position:relative; margin:0px 10px 0px 0px;}

$(document).ready(function(){var scroll = $('#scrollbar2,.scrollbar,.small_menu,.track,.viewport'); 
scroll.css('width', (screen.width)/1.5 + 'px')}); 

$(window).bind('load',function(){ 

$('#scrollbar2').tinyscrollbar({ axis: 'x'}); 
});

가 어떻게 개요를 중지 할 수 있습니다 -div에서 viewport-div로 줄 바꿈?

출처

2011-03-21 Kakafoni

5x500 = 2500 픽셀을 합친 모든 div와 동일한 크기로 개요를 설정해야합니다. 뷰포트의 크기는 고정되어 있어야합니다. 동적 일 수 있지만 tinyscrollbar 업데이트 방법을 사용해야합니다.

출처

2011-03-28 13:11:35 Baijs

작은 스크롤바 플러그인 - overview-div 고정 너비에도 불구하고 줄입니다.

답변

관련 문제