Javascript 滚动容器中的半固定文本

我有一堆包含文本的水平框。这些框都位于一个水平滚动的容器中：

//生成一些随机数据
var模型={
leftEdge:ko.可观察（0）
};
model.rows=populateArray（10+randInt（20），randRow）；
ko.应用绑定（模型）；
$（函数（）{
$（'.slide'）。在（'scroll'，function（）上{
model.leftEdge（this.scrollLeft）；
})
})
函数randRow（）{
var事件=大众阵列（50+randInt（100），randEvent）；
var left=randInt（1000）；
events.forEach（函数（事件）{
event.left=左；
左+=10+事件宽度+randInt（1000）；
});
返回{
事件：事件
}
}
函数randEvent（）{
var word=randWord（）
变量宽度=50+数学最大值（8*word.length，randInt（200））；
var事件={
左:0,，
宽度：宽度，
标签：word
};
event.offset=ko.computed（函数（）{
//重新定位要保留的文本
//*在其容器内
//*全屏幕显示（如有可能）
var leftEdge=model.leftEdge（）；
返回Math.max（0，Math.min(
leftEdge-event.left，
event.width-8*event.label.length
));
});
返回事件；
}
函数randWord（）{
var n=2+randInt（5）；
var ret=“”；
而（n-->0）{
ret+=randElt（“rmhntsk”）；
ret+=randElt（“aeiou”）；
}
返回ret；
}
函数randElt（arr）{
返回arr[randInt（arr.length）]；
}
函数populateArray（n，populate）{
var arr=新数组（n）；
对于（变量i=0；i

。幻灯片{
最大宽度：100%；
溢出：自动；
边框：5px纯黑；
}
.行{
位置：相对位置；
高度：25px；
}
.事件{
位置：绝对位置；
顶部：2.5px；
边框：1px纯黑；
填充：2px；
背景：#cdffff；
字体大小：14px；
字体系列：monospace；
}
.事件>跨度{
位置：相对位置；
}

---

一位朋友帮我想出了这个解决方案

在英语中，我们的想法是为每一行添加一个覆盖，该行相对于滚动框的框架而不是内容定位

然后，我们可以放置一个标签的任何框，重叠在这个覆盖的左边缘，它会出现平滑移动，因为它下面的框滚动

//生成一些随机数据
var模型={
leftEdge:ko.可观察（0），
};
model.rows=populateArray（10+randInt（20），randRow）；
model.width=Math.max.apply（Math，$.map（model.rows，function（row））{
返回行宽度
}));
ko.应用绑定（模型）；
$（函数（）{
$（'.slide'）。在（'scroll'，function（）上{
model.leftEdge（this.scrollLeft）；
})
})
函数randRow（）{
var事件=大众阵列（50+randInt（100），randEvent）；
var left=randInt（1000）；
events.forEach（函数（事件）{
event.left=左；
左+=10+事件宽度+randInt（1000）；
});
返回{
事件：事件，
宽度：左
}
}
函数randEvent（）{
var word=randWord（）
变量宽度=50+数学最大值（8*word.length，randInt（200））；
var事件={
宽度：宽度，
标签：word，
};
event.tense=ko.computed（函数（）{
//重新定位要保留的文本#
//*在其容器内
//*全屏幕显示（如有可能）
var leftEdge=model.leftEdge（）；
返回[‘未来’、‘现在’、‘过去’][
（leftEdge>=event.left）+
（leftEdge>event.left+event.width-8*event.label.length）
];
});
返回事件；
}
函数randWord（）{
var n=2+randInt（5）；
var ret=“”；
而（n-->0）{
ret+=randElt（“rmhntsk”）；
ret+=randElt（“aeiou”）；
}
返回ret；
}
函数randElt（arr）{
返回arr[randInt（arr.length）]；
}
函数populateArray（n，populate）{
var arr=新数组（n）；
对于（变量i=0；i

.wrapper{
位置：相对位置；
边框：5px纯黑；
字体大小：14px；
字体系列：monospace；
}
.幻灯片{
最大宽度：100%；
溢出：自动；
}
.幻灯片>*{
高度：25px；
}
.覆盖{
位置：绝对位置；
宽度：100%；
左：0；
}
.过去{
显示：无
}
.现在{
位置：绝对位置；
z指数：1；
顶部：5.5px；
左0；
}
.覆盖.未来{
显示：无
}
.行{
位置：相对位置；
}
.事件{
位置：绝对位置；
顶部：2.5px；
边框：1px纯黑；
填充：2px；
背景：#cdffff；
高度：14px；
}
.事件.过去{
浮动：对；
}
.事件.出席{
显示：无；
}
.事件.未来{
浮动：左；
}

---

当框到达左边缘时，您可以简单地切换到

文本对齐：右

，但这会立即将文本“捕捉”到右侧，而不是平滑移动文本。我可以想到其他方法，但没有一种方法比您当前的方法使用的JavaScript“更少”。