2014-04-22 9 views
0

저는 최신 버전의 JQuery ScrollTo (1.4.11 절)를 사용하여 (세로 슬라이더를 만들 때) 그 안에 li의 높이만큼 아래로 스크롤하려고하는 ul 목록이 있습니다.).
아래로 스크롤하여 거의 예상대로 작동합니다.
그러나 항상 위로 스크롤 할 때 위치를 벗어나는 6px까지 아래로 스크롤하는 것처럼 보입니다.ScrollTo 스크롤을 너무 멀리 계속 유지합니다.

사이트가 반응하고 필요에 따라 li이 다음 줄로 떨어집니다 (한 번에 최대 4 개까지 표시되며 3 등으로 떨어지고 여전히 제대로 스크롤됩니다).
나는 함수에서 offset을 사용하려했지만 아무런 차이가 없었다.
li에 -6px 여백을 설정하면 데스크톱 브라우저에서 Firefox와 Opera를 여전히 1px까지 스크롤 할 수 있지만 모든 휴대폰과 태블릿에서는 li의 상단이 아래에 표시되기 시작합니다.
나머지 사이트는 HTML5와 CSS3을 사용하고 있습니다.

나는 그것이 보이지 않는 수평 스크롤바와 관련이 있다고 생각 하나? 그렇다면 어떻게 해결할 수 있습니까?

내 코드는 다음과 같습니다 :

HTML 어떤 도움이 크게 감사 것

ul { 
    height: 225px !important; 
    overflow: hidden; 
    max-width: 960px; 
    width: 95%; 
    margin: 0 auto; 
} 

li { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    width: 190px; 
    height: 225px !important; 
    overflow: hidden; 
} 

자바 스크립트

var getHeight = $("ul li").height(); 
var scroll = function (scroll) { 
    if (scroll == 'down') { 
     scroll = '-=' + getHeight + 'px'; 
    } 
    else if (scroll == 'up') { 
     scroll = '+=' + getHeight + 'px'; 
    }; 
    $('ul').scrollTo(scroll, 300, { offset: -6 }); 
}; 
$('.widget-HomePagePortfolio span.prev').bind('click', function() { 
    scroll('down'); 
}); 
$('.widget-HomePagePortfolio span.next').bind('click', function() { 
    scroll('up'); 
}); 

<ul> 
    <li>list one</li> 
    <li>list two</li> 
    <li>list three</li> 
    <li>list four</li> 
    <li>list six</li> 
    <li>list seven</li> 
    <li>list eight</li> 
</ul> 

CSS, 감사합니다!

+0

http://jsfiddle.net/BWPBL/이 항목을 변경하고 스크롤을 overlow로 표시하려면 숨김을 오버플로로 변경해야합니다. 자동/스크롤 –

+0

스크롤을 표시하고 싶지 않습니다. 이전 및 다음 버튼의 클릭 이벤트에서 scrollTo 기능을 사용하려고했습니다. 언급했듯이 나는 그것이 작동하고, 괜찮아 보이지만, 어떤 이유로 스크롤을 6px 더 계속하려고한다. –

+0

나는 jsfiddle을 업데이트했다. http://jsfiddle.net/BWPBL/2/ –

답변

0

나는 이것이 늦었다는 것을 알고있다. 그러나이 문제 나 비슷한 문제가있는 사람이 있다면 이 <li> 인 문제를 발견했다. 이것은 항목에 항상 불필요한 간격이 있음을 의미합니다. 대신 float: left을 사용하여이 문제가 해결되었습니다.