Question

我正在尝试同时在两个不同的屏幕上垂直滚动，如果一个用户要滚动，则另一个div应该像第一个div一样自动滚动到该位置。

我遇到的问题是在小屏幕中，从底部剩余一些空间，尝试通过缓慢滚动查看它。我将代码附加到到目前为止尝试过的地方

df1 %>% 
  separate_rows(code)

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;
	}

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);

});

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

1 个答案: