可以通过以下步骤实现:
<div class="scrollable-div">
<!-- 其他内容 -->
<button class="scrollable-button">按钮</button>
</div>
.scrollable-div {
position: relative;
overflow: auto;
/* 其他样式 */
}
.scrollable-button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
/* 其他样式 */
}
const scrollableDiv = document.querySelector('.scrollable-div');
const scrollableButton = document.querySelector('.scrollable-button');
scrollableDiv.addEventListener('scroll', function() {
const scrollTop = scrollableDiv.scrollTop;
const scrollLeft = scrollableDiv.scrollLeft;
scrollableButton.style.top = scrollTop + 'px';
scrollableButton.style.right = -scrollLeft + 'px';
});
这样,按钮就会始终保持在可滚动div的右上角,无论用户如何滚动内容。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云