두 개의 스크롤을 동기화 할 수 있습니까?jQuery jScrollPane 스크롤 동기화
0
A
답변
2
코드에이 기능을 추가
jQuery.fn.synchronizeScroll = function() {
var elements = this;
if (elements.length <= 1) return;
elements.scroll(
function() {
var left = $(this).scrollLeft();
var top = $(this).scrollTop();
elements.each(
function() {
if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
if ($(this).scrollTop() != top) $(this).scrollTop(top);
}
);
});
}
를 그리고, 당신은 단지 모든 스크롤바를 동기화 할 수있는 요소 내에과 같이 :
$(“jqueryselectorgoeshere”).synchronizeScroll();
0
결합함으로써 그렇게 할 아주 쉬워야한다 jsp-scroll-y
event으로 변경 한 다음 scrollToY
API method을 호출하십시오.
또는 JScrollPane의도 일반 scroll
이벤트를 전달하기 때문에 당신이 (/ 위쪽 속성 왼쪽에 대해 마찬가지로와)
0
/* This is my solution. thank both*/
$c1= $("#c1").jScrollPane();
$c2= $("#c2").jScrollPane();
$("#c1").bind(
'jsp-scroll-y',
function(event, scrollPositionY, isAtTop, isAtBottom)
{
if($(this).find(".jspDrag").hasClass("jspActive")){
$c2.data('jsp').scrollToY(scrollPositionY)
console.log('Handle jsp-scroll-y', this,
'scrollPositionY=', scrollPositionY,
'isAtTop=', isAtTop,
'isAtBottom=', isAtBottom);
}
}
)
$("#c2").bind(
'jsp-scroll-y',
function(event, scrollPositionY, isAtTop, isAtBottom)
{
if($(this).find(".jspDrag").hasClass("jspActive")){
$c1.data('jsp').scrollToY(scrollPositionY)
console.log('Handle jsp-scroll-y', this,
'scrollPositionY=', scrollPositionY,
'isAtTop=', isAtTop,
'isAtBottom=', isAtBottom);
}
}
)
0
여기 대신 scrollTop()
의 getContentPositionY
및 scrollToY
를 사용하는 대신 scrollTop(value)
에 의해 옥수수의 솔루션의 피터을 적용 할 수 끈적 끈적한 행을 만드는 나의 해결책과 끈적 끈적한 행. 오버플로 설정 : #rowHeader, #column 헤더에서 숨김
$("#dataTable").bind('jsp-scroll-y', function(event, scrollPositionY) {
$("#rowHeader").scrollTop(scrollPositionY);
}).bind('jsp-scroll-x',function(event, scrollPositionX) {
$("#columnHeader").scrollLeft(scrollPositionX);
}).jScrollPane();
0
velozyrapthor의 답변은 정확하고 올바르게 작동합니다. 코드에 추가 한 것은 '트랙 클릭'이벤트뿐입니다. 트랙을 클릭하면 위치로 이동합니다.
내 솔루션에 가로 스크롤 막대가 포함되어 있으므로 이벤트를 가로 스크롤 막대로 변경했습니다.
이
내 코드입니다 :$c1=$('#c1').jScrollPane();
$c2=$('#c2').jScrollPane();
//sync the two boxes to scroll together
//bind the scroll to c1
$("#c1").bind(
'jsp-scroll-x',
function(event, scrollPositionX, isAtTop, isAtBottom)
{
if($(this).find(".jspDrag").hasClass("jspActive"))
{
$c2.data('jsp').scrollToX(scrollPositionX)
}
}
);
//bind the jump when clicking on the track
$("#c1").bind('mousedown',function()
{
$c2.data('jsp').scrollToX($c1.data('jsp').getContentPositionX());
});
//bind the scroll to c2
$("#c2").bind(
'jsp-scroll-x',
function(event, scrollPositionX, isAtTop, isAtBottom)
{
if($(this).find(".jspDrag").hasClass("jspActive"))
{
$c1.data('jsp').scrollToX(scrollPositionX)
}
}
);
//bind the jump when clicking on the track
$("#c2").bind('mousedown',function()
{
$c1.data('jsp').scrollToX($c2.data('jsp').getContentPositionX());
});
관련 문제
- 1. JQuery Jscrollpane 인라인 HTML 목록이있는 가로 스크롤
- 2. 스크롤 바를 왼쪽으로 한 JScrollPane
- 3. jscrollpane 문서 로딩시 자동 스크롤?
- 4. jquery jscrollpane : 부분 포스트 백에서 스크롤 막대가 사라짐
- 5. 간단한 페이지에서 스크롤 막대가 누락되었습니다. jquery 및 jscrollpane
- 6. jQuery, jScrollPane on UL
- 7. jquery and jScrollPane and ajax
- 8. jScrollPane Drupal의 스크롤 막대 문제가 있습니다
- 9. jscrollpane/jquery에서 마우스를 사용하지 않고 스크롤
- 10. JScrollpane 스크롤 바 크기 조정 문제
- 11. JScrollPane 마지막으로 추가 된 행에서 스크롤
- 12. jScrollPane resize
- 13. jScrollPane 문제
- 14. jscrollpane 보이지 않습니다.
- 15. jQuery 안의 jScrollPane 아코디언, 작동하지만 보이지 않습니다!
- 16. Silverlight DataGrid 동기화 된 스크롤
- 17. 안드로이드 뷰 페이지 동기화 스크롤
- 18. JScrollPane 동적 조정 문제
- 19. 여러 인스턴스를 동기화 할 수있는 jquery 스크롤 막대 플러그인이 있습니까?
- 20. Jscrollpane 페이지 매김
- 21. jScrollPane 깜박임 발행 사파리
- 22. nirav jscrollpane arrow button
- 23. jScrollPane 문제 AJAX와 After()
- 24. jscrollpane not working
- 25. jScrollPane Scrollbar 문제
- 26. jQuery jScrollpane plugin plugin 이상한 행동
- 27. jquery 문제의 JScrollPane 플러그인입니다. 커스터마이징을하고는 있지만 문제가 생기면
- 28. Qtip에서 jScrollPane 표시
- 29. jQuery 스크롤 상자가없는 스크롤 상자
- 30. UIScrollView 동기화 동기화
이 좋은 해결책처럼 보이지만, 나는 그것이 JScrollPane의이 스크롤 요소의 scrollLeft에와 scrollTop 속성에 영향을주지 않습니다 ... JScrollPane의 작동합니다 모르겠어요 .. . – vitch