저는 최신 버전의 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, 감사합니다!
http://jsfiddle.net/BWPBL/이 항목을 변경하고 스크롤을 overlow로 표시하려면 숨김을 오버플로로 변경해야합니다. 자동/스크롤 –
스크롤을 표시하고 싶지 않습니다. 이전 및 다음 버튼의 클릭 이벤트에서 scrollTo 기능을 사용하려고했습니다. 언급했듯이 나는 그것이 작동하고, 괜찮아 보이지만, 어떤 이유로 스크롤을 6px 더 계속하려고한다. –
나는 jsfiddle을 업데이트했다. http://jsfiddle.net/BWPBL/2/ –