精准滚动到指定行
上面的演示，通过按钮驱动的滚动不会出现顶行、底行文本被切断现象，但通过滚动条滚动文本时这种情况可能会发生。按钮滚动是精准滚动，实现核心在于：容器元素使用flex弹性布局，纵向内边距设为0、设置好高度，同时position必须设置（绝对或相对定位都行）；子元素一般使用p标签，内、外边距都设为0、限制最大高度和行高一致（行高也可以在容器元素设置），注意字体大小不能高于行高。在此基础上就可以通过JS的计算精准滚动到指定行。下面给出关键代码：
/* 容器核心CSS代码 */ display: flex; flex-direction: column; padding: 0 10px; background: #eee; width: 600px; height: 90px; position: relative; /* 子项（p标签）核心代码 */ margin: 0; padding: 0; line-height: 30px; max-height: 30px; flex: auto; font-size: 16px; <!-- html结构代码 --> <div class="mama"> <p>第一行</p> <p>第一行</p> <p>…………</p> <p>第N行</p> </div> // JS依据指定行计算容器翻滚（scrollTo）位置 p元素.offsetTop - (Math.ceil(显示行数 / 2) * 行高) + 行高
发表评论:
评论列表 [1条]
#1 | 飞飞 于 2025-3-21 18:25 发布: 这个好玩，行行出状元：））
