我想滚动紫色区域，同时保持白点对齐。
我当前的代码有两个相关的问题:
- 蓝色矩形比紫色矩形宽。
- 将滚动条一直向右移动(使圆点向左移动)时，紫色矩形中的点比蓝色矩形中的点移动得更远。
如何解决这两个问题？我当前的代码 (html/svg/css/jquery) 如下。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.c00 { overflow: hidden; float: left;}
.c01 { overflow: hidden; width: 300;}
.c10 { overflow: hidden; height: 200; float: left;}
.c11 { overflow: auto; width: 300;}
.e11 { height: 200}
</style>
</head>
<body>
<div class="c00">
<div class="e00">
<svg version="1.1" width="100" height="100">
<rect width="100" height="100" fill="red"/>
<circle cx="50" cy="50" r="10" fill="white"/>
</svg>
</div>
</div>
<div class="c01 horzLinked">
<div class="e01">
<svg version="1.1" width="600" height="100">
<rect width="600" height="100" fill="blue"/>
<circle cx="300" cy="50" r="10" fill="white"/>
</svg>
</div>
</div>
<div style="clear: both;"></div>
<div class="c10 vertLinked">
<div class="e10">
<svg version="1.1" width="100" height="400">
<rect width="100" height="400" fill="green"/>
<circle cx="50" cy="200" r="10" fill="white"/>
</svg>
</div>
</div>
<div class="c11 vertLinked horzLinked">
<div class="e11">
<svg version="1.1" width="600" height="400">
<rect width="600" height="400" fill="purple"/>
<circle cx="300" cy="200" r="10" fill="white"/>
</svg>
</div>
</div>
<script>
$(function(){
$('.vertLinked').scroll(function(){
$('.vertLinked').scrollTop($(this).scrollTop());
})
})
$(function(){
$('.horzLinked').scroll(function(){
$('.horzLinked').scrollLeft($(this).scrollLeft());
})
})
</script>
</body>
</html>
最佳答案
因为滚动条宽度会包含在div宽度中所以你会发现蓝色矩形内容比紫色矩形内容宽 要解决此问题，您有两种解决方案
1- 仅当紫色矩形水平溢出时，通过将滚动条宽度添加到其宽度，使紫色矩形比蓝色矩形宽
2- 如果 scrollLeft 大于矩形宽度，则扣除滚动条宽度
这是解决方案2的代码
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.c00 { overflow: hidden; float: left;}
.c01 { overflow: hidden; width: 300px;}
.c10 { overflow: hidden; height: 200px; float: left;}
.c11 { overflow: auto; width: 300px;}
.e11 { height: 200px}
</style>
</head>
<body>
<div class="c00">
<div class="e00">
<svg version="1.1" width="100" height="100">
<rect width="100" height="100" fill="red"/>
<circle cx="50" cy="50" r="10" fill="white"/>
</svg>
</div>
</div>
<div class="c01 horzLinked">
<div class="e01">
<svg version="1.1" width="600" height="100">
<rect width="600" height="100" fill="blue"/>
<circle cx="300" cy="50" r="10" fill="white"/>
</svg>
</div>
</div>
<div style="clear: both;"></div>
<div class="c10 vertLinked">
<div class="e10">
<svg version="1.1" width="100" height="400">
<rect width="100" height="400" fill="green"/>
<circle cx="50" cy="200" r="10" fill="white"/>
</svg>
</div>
</div>
<div class="c11 vertLinked horzLinked">
<div class="e11">
<svg version="1.1" width="600" height="400">
<rect width="600" height="400" fill="purple"/>
<circle cx="300" cy="200" r="10" fill="white"/>
</svg>
</div>
</div>
<script>
$(function(){
$('.vertLinked').scroll(function(){
$('.vertLinked').scrollTop($(this).scrollTop());
})
})
$(function(){
$('.horzLinked').scroll(function(){
var scrollLeft;
$this = $(this);
if ($this.scrollLeft() > $this.width())
scrollLeft = $this.scrollLeft() - getScrollbarWidth();
else
scrollLeft = $this.scrollLeft()
$('.horzLinked').scrollLeft(scrollLeft);
})
})
function getScrollbarWidth() {
var $inner = $('<div style="width: 100%; height:200px;">test</div>'),
$outer = $('<div style="width:200px;height:150px; position: absolute; top: 0; left: 0; visibility: hidden; overflow:hidden;"></div>').append($inner),
inner = $inner[0],
outer = $outer[0];
$('body').append(outer);
var width1 = inner.offsetWidth;
$outer.css('overflow', 'scroll');
var width2 = outer.clientWidth;
$outer.remove();
return (width1 - width2);
}
</script>
</body>
</html>
这是一个demo
关于jquery - 如何在顶部和侧面标签正确滚动的情况下水平和垂直滚动 html 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22278601/