與jQuery相反/滾動滾動onScroll

我想在左邊的div上正常滾動頁面，但在右邊的div上滾動反轉（向上）。但是，當我開始左側的滾動時，它不會啓動右側的滾動。當我滾動它只滾動左邊一段時間，然後它開始滾動按預期。與jQuery相反/滾動滾動onScroll

我在做什麼錯？

---------------------- Javascript ----------------------

$(document).ready(function(){ 
    $('#two').scrollTop($('#two')[0].scrollHeight); 
    $('#one').scroll(function(){ 
    var length = $(this).scrollTop(); 
    $('#two').scrollTop((two.scrollHeight)-length); 
    }); 
});

---------------------- Html --------------------- -

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    #one, #two{ 
    float: left; 
    overflow: scroll; 
    height: 100%; 
    width: 50%; 
    } 
</style> 
</head> 
<body> 
    <div id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
    <div id="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
</body> 
</html>

來源

2012-11-01 Mads Frank

請在後你的源代碼，以及你jsbin鏈接：http://meta.stackexchange.com/questions/84342/answer-that-only-contains-a-鏈接到的jsfiddle – Lowkase

$(document).ready(function(){ 

    var height = $('#two')[0].scrollHeight; 

    $('#two').scrollTop(height); 

    height = $("#two").scrollTop(); 

    $('#one').scroll(function(){ 
    var length = $(this).scrollTop(); 

    console.log(height); 
    console.log(length); 

    $('#two').scrollTop(height - length); 

    }); 
});

的scrollHeight實際上不等於scrollTop()。

http://jsbin.com/orole3/43/edit

來源

2012-11-01 12:55:10 Mifeng

$(document).ready(function(){ 
    $('#two').scrollTop($('#two').height()); 
    var offset = $("#two").height() - $('#two').scrollTop(); 
    $('#one').scroll(function(){ 
    var length = $("#one").scrollTop(); 
    $('#two').scrollTop($('#two').innerHeight()-length-offset); 
    }); 
});

來源

2012-11-01 12:58:47 pckill

與jQuery相反/滾動滾動onScroll

回答

相關問題