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

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

我在我 friend 的帮助下尝试了一些，我们得到了一个完美的解决方案，所以我将其发布在答案中，它对我来说很好用。我们修改了 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);

});