代码之家 › 专栏 › 技术社区 › Kashif Latif

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

scroll css html jquery javascript

Kashif Latif · 技术社区 · 6 年前

我得到的问题是在小屏幕有点空间是从底部剩余尝试通过缓慢滚动查看它。我将代码附加到我迄今为止尝试的代码下面

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>

1 回复 | 直到 6 年前

Kashif Latif 6 年前

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

});