关于在有动态的Scroll Bar情况下页面内容的对齐问题
关于在有动态的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%)否则也会失效
// 以及 以上方法在剧烈缩放后没有刷新页面时也不会生效
// 如果列比较多 差异会更且每列都有边框时效果更差