微信小程序中使用absolute定位在scroll-view中遇到问题，如何解决？

Question

这是设计稿的效果，

这是我做的效果

我实现的方式是作用使用的是 scroll-view 标签，省份后面的数字使用的是absolute定位，我如何修改才能做到设计稿的效果？？？

Answer 1

不行，overflow 属性不能同时设置 visible 和 scroll 两个状态。

All values are treated the same as for 'overflow', but on this property, they only affect whether or not the element is vertically clipped or has a vertical scrolling mechanism.

• The computed value is the specified value, except in the following case: combinations of 'overflow-x' and 'overflow-y' where one is 'visible' and the other is 'scroll' or 'auto' are not possible. In that case the computed value of 'visible' will be 'auto'.

我之前有过一篇相关的笔记 👉 CSS 中 overflow 值的冲突和自动转换问题

---

所以想要实现设计稿上的效果，需要把你的滚动容器右侧添加 数字气泡 宽度一半的 padding-right。
也就是这样的一个DOM结构：