css 元素定位不随滚动条移动问题

在有滚动条的模块中,使用 position: absolute 定位的div会随着滚动条滚动而位置变化

需求:始终固定在某个位置

浏览器渲染规则:如果html和body只有一个overflow,那么滚动条作用于文档,如果都有overflow属性,html作用于文档,body作用于自身。

绝对定位是相对于初始包含块,当拖动文档的滚动条他会随之滚动,如果文档的滚动条禁止,给body添加滚动条,绝对定位不会变动

 

不要给父元素添加position:relative;让div相对于body固定

.centerItem {
  //注释掉父元素的position:relative
  // position: relative;
  height: 100%;
  overflow: auto;
}

//需要固定的div
.bottom1 {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 CSS 中实现不依靠滑动条进行拖动的滚动区域,可以使用 JavaScript 来监听鼠标事件,并通过改变元素的滚动位置来实现。下面是一个示例代码,演示了如何在 CSS 中实现不依靠滑动条进行拖动的滚动区域: ```html <style> .scrollview-container { width: 300px; height: 200px; overflow: hidden; position: relative; } .scrollview-content { height: 500px; position: absolute; top: 0; left: 0; } .scrollview-draggable { width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: grab; } </style> <div class="scrollview-container"> <div class="scrollview-content"> <!-- 这里放置滚动内容 --> <!-- 可以是文本、图片或其他元素 --> </div> <div class="scrollview-draggable"></div> </div> <script> var container = document.querySelector('.scrollview-container'); var draggable = document.querySelector('.scrollview-draggable'); var content = document.querySelector('.scrollview-content'); var isDragging = false; var startMouseY = 0; var startScrollTop = 0; draggable.addEventListener('mousedown', function(event) { isDragging = true; startMouseY = event.clientY; startScrollTop = container.scrollTop; draggable.style.cursor = 'grabbing'; }); document.addEventListener('mousemove', function(event) { if (!isDragging) return; event.preventDefault(); var deltaY = event.clientY - startMouseY; container.scrollTop = startScrollTop - deltaY; }); document.addEventListener('mouseup', function() { isDragging = false; draggable.style.cursor = 'grab'; }); </script> ``` 在上述代码中,我们首先定义了一个 `.scrollview-container` 类来创建滚动区域的容器。通过设置容器的宽度、高度和 `overflow: hidden` 来隐藏默认的滚动条。然后,我们使用 `position: relative` 来设置容器的定位上下文。 在 `.scrollview-content` 类中,我们设置内容区域的高度,并使用 `position: absolute` 将其相对于容器进行定位。 我们创建了一个额外的 `<div>` 元素,并为其添加了 `.scrollview-draggable` 类。这个可拖动的元素将覆盖整个滚动区域。通过设置它的宽度、高度和 `position: absolute`,我们使其填满整个容器,并使用 `cursor: grab` 设置鼠标指针样式。 接下来,我们使用 JavaScript 监听鼠标事件来实现拖动。当鼠标按下时,我们将设置 `isDragging` 为 `true`,并记录鼠标初始位置和滚动条位置。当鼠标移动时,我们根据鼠标位置的变化来计算滚动条的新位置,并通过改变容器的 `scrollTop` 属性来实现滚动。当鼠标释放时,我们将 `isDragging` 设置为 `false`。 这样,你就可以在不依靠滑动条进行拖动的滚动区域中实现滚动效果了。你可以根据需要调整滚动区域的样式和交互细节。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值