javascript - 将 marginLeft 更改为滚动父 div 中的子 div

Question

我试图将一个 position: absolute div 放在滚动的 div 中，并使其在向左或向右滚动时保持在左侧。这是因为我希望 div 像一个单元一样移动(当向左、向右、顶部、底部滚动时)。它在低于 2K 的屏幕上运行良好，但在高清屏幕(即 2k、3k、4k...)上，子 div 跳来跳去，看起来很糟糕。

有更好的方法吗？我应该对高清屏幕的 CSS 进行哪些更改？

#parent {    
    overflow: auto;
    width: 100%;
    height: 100%;
    position: relative;
}
#child {    
    overflow: hidden;
    width: 20%;
    height: 100%;
    z-index:1;
    position: absolute;
}

<div id="parent">
    <div id="child"></div>
</div>

$("#parent").on('scroll', function (event) {
     $("#child")[0].style.marginLeft = this.scrollLeft+"px";
});

Answer 1

您可以使用 jQuery 的 css 函数来设置该值。并使用父元素作为 jQuery 对象来使用 scrollLeft() 函数:

$("#parent").on("scroll", function() {
    $("#child").css("margin-left", $(this).scrollLeft() + "px");
});

但我根本不会为此使用 jQuery。为什么不为此在 css 中使用 fixed 位置？ Like in this example .它不应在任何屏幕上闪烁。