css居底随滚动条滚动

CSS的position属性可以用于控制元素的位置，并帮助开发者实现一些比较炫酷的效果。其中，position属性有一个叫做fixed的值，可以将一个元素固定在浏览器窗口的某个位置，无论用户怎么滚动页面，该元素都会保持不变。

但是，如果我们想要实现一个固定在页面底部的元素，并且随着用户滚动页面而进行相应的偏移，该怎么做呢？这时，我们可以使用position属性的一个小技巧，将其值设置为absolute，并且将bottom属性设置为0。这样，该元素就会被放置在页面的底部，并且随着用户滚动页面而进行相应的调整。

.bottom {
        position: absolute;
        bottom: 0;
}
    

但是，我们会发现这个方法存在一个问题，即当页面内容过多时，底部的元素可能会被遮住，影响用户体验。因此，我们可以使用JavaScript来实现更好的效果，即让该元素随着用户滚动而动态地改变位置。

const bottomEl = document.querySelector('.bottom');
    window.addEventListener('scroll', () =>
 {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        const documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        const bottomPosition = documentHeight - scrollTop - windowHeight;
    if (bottomPosition = bottomEl.offsetHeight) {
        bottomEl.style.bottom = `${
bottomEl.offsetHeight - bottomPosition}
    px`;
    }
 else {
            bottomEl.style.bottom = 0;
    }
}
    );
    

上述代码中，我们通过监听滚动事件，并获取当前页面的滚动位置、窗口高度和文档总高度来计算出底部元素的位置，然后动态地改变其bottom属性的值。这样，该元素就可以随着滚动条的滚动而动态地改变位置，同时也不会被页面内容遮住。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！