버튼으로 오른쪽 및 왼쪽 스크롤

왼쪽, 오른쪽 및 오른쪽의 세 개 div가 있습니다. Middle는 내용을 나타내고 왼쪽 div와 rightdiv는 중간 div를 스크롤하는 버튼에만 사용됩니다. 중간 div의 내용은 그림 목록이 될 것입니다. 따라서 사용자가 가운데 div의 오른쪽에 여전히 숨겨진 그림을보고 싶으면 오른쪽 div를 클릭하여 오른쪽으로 스크롤 할 수 있습니다.버튼으로 오른쪽 및 왼쪽 스크롤

제 질문이 이해되기를 바랍니다.

이 스크립트는 내 div에서 작동하지 않습니다. 여기있는 누군가가 저 div를 제어 할 수있는 또 다른 스크립트를 줄 수 있다고 생각합니다.

내가

$(document).ready(function() { 
     $("#left").click(function() { 
     var leftPos = $('.DivDataMain').scrollLeft(); 
     $(".DivDataMain").animate({scrollLeft: leftPos + 250}, 600); 
    }); 

     $("#right").click(function() { 
     var leftPos2 = $('.DivDataMain').scrollLeft(); 
     $(".DivDataMain").animate({scrollLeft: leftPos2 - 250}, 600); 
    }); 
     });

뿐인 사용할 수없는 경우에만 스크립트입니다 : 사전

에

Scroll Left to Right with Button

감사를

출처

2014-07-05 Anonymous

scrollIntoView jquery 플러그인을 사용할 수 있습니다. 중간 div를 스크롤하는 대신. 이미지의 행과 열을 유지 보수합니다. 열과 행이있는 이미지 테이블이 있다고 가정 해보십시오. 10 개의 열이 있다고 가정 해보십시오. 해당 열의 너비를 계산하여 어떤 열이 보이는지 확인하십시오. 사용자가 오른쪽 버튼을 클릭하면 11 번째 열의 이미지를 가져 와서보기로 스크롤하거나 그 반대의 경우 왼쪽으로 이동합니다. 그리고 이미지를 스크롤하면 가장 왼쪽의 열 인덱스와 가장 오른쪽의 열 인덱스가 유지됩니다. –

조언 주셔서 감사합니다. 나는 그것이 더 좋을지 모른다면 빨리 시도해 보겠다. –

실제로 테이블을 사용하는 경우 이미지가있는 열을 스크롤하는 것이 더 효과적 일 수 있습니다. 그렇다면 x 이미지에서 1 개가 아닌 컬럼에 기초를 두십시오. –

스크립트가 정확하다고 보입니다. 나는 당신이로 실행중인 문제가 두 가지 생각 :

당신은 폭이 컨테이너 DIV에 설정해야합니다
사업부의 현재 폭을 초과해야 중간 사업부에서 귀하의 콘텐츠를, 그렇지 않으면 jQuery를 요한은 스크립트가 괜찮 말한대로 그것을

Here's a DEMO

.DivDataMain { 
    width:100%; 
    overflow:hidden; 
    display:block; 
    background:#000; 
    height:400px; 
    margin:auto; 
    position: relative; 
}

출처

2014-07-05 06:28:46

http://jsfiddle.net/Alkasih/swQ7J/3/이 div를 살펴보십시오. –

내 데모를 참조하십시오 ... 본질적으로 동일한 div를 사용합니다. –

안녕하세요, 작동하지만 왼쪽의 경우에만, 오른쪽의 경우에는 작동하지 않습니다. 오른쪽 버튼에 무슨 문제가 있습니까? –

그냥 떠와 권리를 고칠 수

오른쪽으로 colomn 절대와 함께 레이아웃.

브라우저를 기본적으로 오른쪽에서 왼쪽으로 스크롤 할 수있게하십시오. 오른쪽 여백과 바깥 쪽 내용의 여백을 오른쪽 여백과 똑같은 너비로 나누면됩니다. 그렇게하면 오른쪽 끝으로 스크롤하여 나머지 div를 숨길 수 있습니다.

출처

2014-07-05 06:09:39

나는 그것이 상호 작용하기를 원한다. 중간 div의 내용은 그림 목록이 될 것입니다. –

div와 CSS의 예를 게시 할 수 있습니까? –

피들 링크 http://jsfiddle.net/Alkasih/swQ7J/3/ –

을 스크롤하지 않습니다 ... 당신이야 '전체 슬라이드를 사용하기보다는 2 사업부 애니메이션을 고려해 볼 수 있습니다 50px ... 나중에 그림 선택을 제한합니다 ... 시도해보십시오 https://github.com/eamonnkillian/Slide-in-Frames

출처

2014-07-05 06:41:46

안녕하세요, 링크 주셔서 감사합니다,하지만 어떻게 작동 볼 수있는 링크로 데모를 미리 볼 수 있습니까? –

훑어보기 빠른 AWS 머신 ... http://ec2-54-186-182-242.us-west-2.compute.amazonaws.com/Slide-in-Frames/ –

John의 바이올린 데모를 기반으로 , 내 사진을 제한하는 슬라이더를 설정하는 방법, 제안하는 방법 ... –

버튼으로 오른쪽 및 왼쪽 스크롤

답변

관련 문제