CSS元素可见性问题：如何让排序栏右侧也显示部分按钮？

问题场景与代码 #

我正在开发React应用，实现了一个供用户选择排序选项的滚动栏，代码如下：

JSX结构 #

<div className="innerLineVisor">
    <div className="sortLine" ref={lineRef}>
        {cuisines.map(cuisine =>
            <div key={cuisine.id} className="sortButton">{cuisine.value}</div>
        )}
    </div>
</div>

对应CSS样式 #

.innerLineVisor {
    width: 80%;
    height: 40px;
    border: #C80303 1px solid;
    overflow: hidden;
    position: absolute;
    box-sizing: border-box;
    left: 10%;
    bottom: 0;
}

.sortLine {
    height: 40px;
    background-color: white;
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline;
    transition: 1s;
}

.sortButton {
    float: left;
    width: 120px;
    padding: 5px 10px;
    border: darkgray 1px solid;
    border-radius: 10px;
    background-color: white;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
}

滚动控制函数 #

function leftMotion() {
    setLimitPositions({...limitPositions, right: false})

    if (linePosition + step > 0) {
        lineRef.current.setAttribute('style', 'left: 0')
        setLinePosition(0)
        setLimitPositions({...limitPositions, left: true})
        return
    }

    lineRef.current.setAttribute('style', 'left:' + (linePosition + step) + 'px')
    setLinePosition(linePosition + step)

    if (limitPositions.left && arrowsPressed.left) {
        lineRef.current.setAttribute('style', 'left:' + (linePosition + 10) + 'px')
    }
}

function rightMotion() {
    setLimitPositions({...limitPositions, left: false})

    lineRef.current.setAttribute('style', 'left:' + (linePosition - step) + 'px')
    setLinePosition(linePosition - step)

    const lineVisorWidth = getLineVisorWidth()
    if (lineVisorWidth > (lineLength - (Math.abs(linePosition))) - lineVisorWidth) {
        const limitRightPosition = lineLength - lineVisorWidth
        lineRef.current.setAttribute('style', 'left:' + (-limitRightPosition) + 'px')
        setLinePosition(-limitRightPosition)
        setLimitPositions({...limitPositions, right: true})
    }
}

当前问题 #

当按钮无法完全适配左侧可视区域时，左侧能显示按钮的部分内容，但右侧要等按钮完全进入可视区域才会显示，之前一直呈现空白。

解决方案 #

1. 调整CSS布局，支持按钮部分显示 #

问题根源之一是float布局导致容器宽度计算不灵活，改用flex布局能更好地控制按钮排列，同时允许部分显示：

修改.sortLine的CSS：

.sortLine {
    height: 40px;
    background-color: white;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex; /* 替换inline为flex */
    gap: 10px; /* 用gap替代按钮的左右margin，间距更统一 */
    transition: 1s;
}

调整.sortButton的样式，移除左右margin并添加flex-shrink: 0防止按钮被压缩：

.sortButton {
    width: 120px;
    padding: 5px 10px;
    border: darkgray 1px solid;
    border-radius: 10px;
    background-color: white;
    margin-top: 5px;
    /* 移除margin-left和margin-right */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0; /* 确保按钮宽度固定，不会被压缩 */
}

2. 修正右侧滚动边界逻辑 #

原来的rightMotion函数限制了滚动到刚好完全显示最后一个按钮的位置，调整逻辑允许最后一个按钮部分进入可视区域：

function rightMotion() {
    setLimitPositions({...limitPositions, left: false})

    const newPosition = linePosition - step
    // 直接修改style属性，避免覆盖transition等其他样式
    lineRef.current.style.left = `${newPosition}px`
    setLinePosition(newPosition)

    const lineVisorWidth = getLineVisorWidth()
    // 计算允许的最小left值：让最后一个按钮的一部分能显示在可视区域内
    const minLeftPosition = -(lineLength - lineVisorWidth + 120) // 120为按钮固定宽度
    if (newPosition < minLeftPosition) {
        lineRef.current.style.left = `${minLeftPosition}px`
        setLinePosition(minLeftPosition)
        setLimitPositions({...limitPositions, right: true})
    }
}

另外，建议在leftMotion中也改用style.left的方式修改位置，避免覆盖transition样式：

function leftMotion() {
    setLimitPositions({...limitPositions, right: false})

    if (linePosition + step > 0) {
        lineRef.current.style.left = '0'
        setLinePosition(0)
        setLimitPositions({...limitPositions, left: true})
        return
    }

    const newPosition = linePosition + step
    lineRef.current.style.left = `${newPosition}px`
    setLinePosition(newPosition)

    if (limitPositions.left && arrowsPressed.left) {
        lineRef.current.style.left = `${linePosition + 10}px`
    }
}

内容的提问来源于stack exchange，提问作者Igor Meshalkin