标签：Bar 宽度 内容 对齐 Scroll 页面

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

标签：Bar,宽度,内容,对齐,Scroll,页面
来源： https://www.cnblogs.com/OwlInTheOaktree/p/16259653.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。