请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2025-3-21 18:28 编辑
上面的演示，通过按钮驱动的滚动不会出现顶行、底行文本被切断现象，但通过滚动条滚动文本时这种情况可能会发生。按钮滚动是精准滚动，实现核心在于：容器元素使用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) * 行高) + 行高
| 
发表于 2025-3-21 18:20
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2025-3-21 18:33
我觉得就是超级英雄。。
