关于在有动态的Scroll Bar情况下页面内容的对齐问题

问题场景

一个标题行 + 一些内容行要求在内容行超过指定行数时将多出的行隐藏，并展示Scroll Bar的来提示用户可以下划查看更多内容

一般处理就是给目标所在上级元素加上 style="overflower-x:auto"

这时会有 Scroll Bar 在隐藏和显示时带来的宽度变化，造成标题与内容对不齐的情况

解决办法

// 编写 以下函数
function setScrollWidth(){
        $('target').css('margin-right',$("#titleId")[0].clientWidth - $("#continerId")[0].clientWidth);
    }
// 主要的意图就是 在 target 元素上 加上 由于 Scroll Bar 插入时产生的宽度差 的 margin 或者 padding （是 -left还是 -right 主要看自己的需求) 即可弥补由于 Scroll Bar 带来的宽度差产生的不对齐现象
// 在 会导致Scroll Bar 出现或者隐藏的 场合调用即可
// 当然 内容行 中的每一列也不要溢出（如果是按照 百分比 来计算宽度，需要严格让 行内列内容 总和为100%）否则也会失效
// 以及 以上方法在剧烈缩放后没有刷新页面时也不会生效
// 如果列比较多 差异会更且每列都有边框时效果更差

posted on 2022-05-11 20:25 OwlInTheOaktree 阅读(64) 评论(0) 编辑收藏举报