在两个不同的屏幕上垂直滚动

Question

我试图同时在两个不同的屏幕上垂直滚动，如果一个用户滚动，那么另一个 div 应该自动滚动到第一个 div 上的那个位置。

我遇到的问题是在小屏幕上，底部还有一点空间尝试通过缓慢滚动来查看它。我在我目前尝试过的下面附加代码

var global_std = 0;
	var global_tch = 0;
	
	function function_std(){
		global_std = $(".scroll_std").scrollTop();
		$("#tch_id").scrollTop(global_std);
	}

	
	function function_tch(){
		global_tch = $(".scroll_tch").scrollTop();
		$("#std_id").scrollTop(global_tch);
	}

* {
		margin: 0px;
		padding: 0px;
	}
	.container {
		width: 80%;
		background-color: #ccc;
		margin: 50px auto;
		padding: 20px;
	}
	.student {
		width: 35%;
		height: 500px;
		float: left;
		background-color: white;
		overflow-x: scroll;
		overflow-y: scroll;
	}
	.teacher {
		width: 60%;
		height: 700px;
		float: right;
		background-color: white;
		overflow-x: scroll;
		overflow-y: scroll;
	}
	.clear {
		clear: both;
	}
	.learning-space {
		width: 1000px;
		height: 1000px;
	}
	h2 {
		margin-bottom: 20px;
		text-align: center;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div id="std_id" class="student scroll_std" onscroll="function_std();">
		<h2>Student Screen</h2>
		<hr>
		<div class="learning-space"></div>
	</div>
	<div id="tch_id" class="teacher scroll_tch" onscroll="function_tch();">
		<h2>Teacher Screen</h2>
		<hr>
		<div class="learning-space"></div>
	</div>
	<div class="clear"></div>
</div>

Answer 1

我在朋友的帮助下进行了一些尝试，我们得到了一个完美的解决方案，所以我将把它发布在答案中，它对我来说很好用。我们修改了java脚本，得到了正确的解决方案。

$(document).ready(function () {

    var master = "tch_id";
    var slave = "std_id";
    var master_tmp;
    var slave_tmp;
    var timer;

    var sync = function () {
        if ($(this).attr('id') == slave) {
            master_tmp = master;
            slave_tmp = slave;
            master = slave;
            slave = master_tmp;
        }

        $("#" + slave).unbind("scroll");

        var ypercentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
        var xpercentage = this.scrollLeft / (this.scrollWidth - this.offsetWidth);

        var y = ypercentage * ($("#" + slave).get(0).scrollHeight - $("#" + slave).get(0).offsetHeight);
        var x = xpercentage * ($("#" + slave).get(0).scrollWidth - $("#" + slave).get(0).offsetWidth);

        $("#" + slave).scrollTop(y);
        $("#" + slave).scrollLeft(x);

        if (typeof (timer) !== 'undefind')
            clearTimeout(timer);

        timer = setTimeout(function () { $("#" + slave).scroll(sync) }, 200)
    }

    $('#' + master + ', #' + slave).scroll(sync);

});