Question

最近在这里，我提出了一个问题，要将bar元素始终放在容器的左下角。似乎不可能只使用CSS。所以，我最终使用了javascript。这是Working Fiddle

重点介绍上一个问题：

将条形元素粘贴到容器的左下角
条形图应位于左下方，即使容器垂直或水平滚动。
如果存在水平滚动条，则栏应该越过水平滚动条。

上面的小提琴工作正常并且服从上述所有情况，即使调整窗口大小。

现在，我有相同的情况，但由于动画按钮单击而不是窗口调整大小，容器将调整大小。

因为，我动画了一秒钟，所以当我点击动画按钮时，我调用窗口调整大小功能中的相同代码。但这样做会以某种方式打破并且不符合上述规则/要求。

这是Fiddle。（无法正常工作）

请帮忙。

PS：这是指向previous question的链接。（如果有人想要简短的理解）

Answer 1

再次，我解决了它。我让事情变得复杂。如果只需要bottom属性，我使用top并重置它。代码中有大量不必要的操作。

这是代码，工作正常。

$(function () {
    $('.content').width($('body').width() - 50);
});

var stickToBottom = function (parent) {
    var bar = parent.querySelector('.bar');
    var top = bar.offsetTop;
    parent.addEventListener('scroll', function (e) {
        var el = e.currentTarget;
        bar.style.bottom = -el.scrollTop + "px";
        bar.style.left = el.scrollLeft + "px";
    });
}
var parent = document.querySelector('.parent');
stickToBottom(parent);

$('.clickme').click(function () {
    $(this).toggleClass('active');
});

感谢rlemon在javascript chat room中提出想法。

Working Fiddle

即使在制作动画时也始终将条形图粘贴到页脚

1 个答案: