Question

我基本上有一个较小的div，溢出设置为auto。在里面，我有另一个大网格大小的div，在这个div里面我有画布元素，应该有第一个小div的大小。

我想要实现的是让画布始终显示在较小的div中，无论我在哪里滚动。

我将canvas的位置设置为relative，每当我滚动时，top和left属性在javascript中设置为scrollTop和scrollLeft。这样我的画布总是固定大小（没有性能问题），在javascript中我可以计算滚动的位置。

var s=document.getElementById("scrollable");
var c=document.getElementById("canvas");

c.width=400;
c.height=400;

var maxw = s.scrollWidth;
var maxh = s.scrollHeight;

s.onscroll = function(){
    c.style.top = s.scrollTop + "px";
    c.style.left = s.scrollLeft + "px";    
}

我遇到的问题是，当我到达滚动结束时，画布似乎溢出了大div（由于我相信滚动条的大小），因此大div的大小正在增加并且滚动继续而它不应该。

链接到简单示例：http://jsfiddle.net/kwynt/1/

Answer 1

我认为你对导致问题的滚动条是正确的。它们缩小了div的可视区域，因此画布总是在右侧和底部溢出（因为你继续向下移动画布，你永远不会在那里滚动）。您可以将其添加到“wrap”div中以修复：

overflow:hidden

http://jsfiddle.net/a3XPB/

可滚动div（css + js）

1 个答案: