Javascript 如何使阅读项目在滚动时保持在同一位置

我想让用户在不改变滚动位置的情况下更容易阅读

问题：我想使滚动项处于固定位置，该项具有.active类

我想使阅读位置始终固定，以便内容始终对用户可见

我尝试了以下代码：

var newsItem=1； 设置间隔函数{ newsItem++； $'.list项'.removeClass'active'； $'.list项[data-n='+newsItem+']'.addClass'active'； 如果newsItem>=200 newsItem=1； //日志'newsItem newsItem'，newsItem； },1000; 阅读新闻，阅读新闻1{ 宽度：263px； 高度：516px； 溢出：自动； 边框：1px实心ccc； } 阅读新闻1{宽度：200px；} 阅读新闻，阅读新闻{ 列表样式：无； 线高：44px； 字体大小：20px； } 李：很活跃{ 背景：4444； 颜色：fff； } 滚动框 新闻滚动条1 新闻滚动条2 新闻滚动项目3 新闻滚动项目4 新闻滚动项目5 新闻滚动项目6 新闻滚动项目7 新闻滚动项目8 新闻滚动项目9 新闻滚动项目10 新闻滚动项目11 新闻滚动项目12 新闻滚动条13 新闻滚动项目14 新闻滚动项目15 新闻滚动项目16 新闻滚动项目17 新闻滚动项目18 新闻滚动项目19 新闻滚动条20 新闻滚动条21 新闻滚动项目22 新闻滚动项目23 新闻滚动条24 新闻滚动条25 新闻滚动项目26 新闻滚动项目27 新闻滚动项目28 新闻滚动项目29 新闻滚动条30 新闻滚动条31 新闻滚动项目32 新闻滚动条33 新闻滚动条34 新闻滚动项目35 新闻滚动项目36 新闻滚动条37 新闻滚动条38 新闻滚动条39 新闻滚动项目40 新闻滚动条41 新闻滚动项目42 新闻滚动项目43 新闻滚动项目44 新闻滚动项目45 新闻滚动条46 新闻滚动条47 新闻滚动条48 新闻滚动项目49 新闻滚动项目50 新闻滚动条51 新闻滚动项目52 新闻滚动项目53 新闻滚动项目54 新闻滚动项目55 新闻滚动项目56 新闻滚动项目57 新闻滚动项目58 新闻滚动条59 新闻滚动项目60 新闻滚动条61 新闻滚动项目62 新闻滚动条63 新闻滚动项目64 新闻滚动项目65 新闻滚动项目66 新闻滚动项目67 新闻滚动条68 新闻滚动项目69 新闻滚动条70 新闻滚动项目71 新闻滚动项目72 新闻滚动项目73 新闻滚动项目74 新闻滚动项目75 新闻滚动项目76 新闻滚动条77 新闻滚动条78 新闻滚动项目79 新闻滚动条80 新闻滚动条81 新闻滚动项目82 新闻滚动项目83 新闻滚动项目84 新闻滚动项目85 新闻滚动项目86 新闻滚动项目87 新闻滚动项目88 新闻滚动项目89 新闻滚动条90 新闻滚动项目91 新闻滚动项目92 新闻滚动条93 新闻滚动项目94 新闻滚动条95 新闻滚动项目96 新闻滚动项目97 新闻滚动条98 新闻滚动条99 新闻滚动条100 新闻滚动条101 新闻滚动条102 新闻滚动条103 新闻滚动条104 新闻滚动项目105 新闻滚动条106 新闻滚动条107 新闻滚动条108 新闻滚动条109 新闻滚动条110 新闻滚动条111 新闻滚动条112 新闻滚动条113 新闻滚动项目114 新闻滚动条115 新闻滚动条116 新闻滚动项目117 新闻滚动条118 新闻滚动条119 新闻滚动条120 新闻滚动条121 新闻滚动项目122 新闻滚动条123 新闻滚动条124 消息 滚动项目125 新闻滚动条126 新闻滚动条127 新闻滚动条128 新闻滚动条129 新闻滚动条130 新闻滚动条131 新闻滚动条132 新闻滚动条133 新闻滚动条134 新闻滚动条135 新闻滚动项目136 新闻滚动条137 新闻滚动条138 新闻滚动条139 新闻滚动条140 新闻滚动条141 新闻滚动项目142 新闻滚动条143 新闻滚动条144 新闻滚动条145 新闻滚动条146 新闻滚动条147 新闻滚动条148 新闻滚动项目149 新闻滚动条150 新闻滚动条151 新闻滚动项目152 新闻滚动条153 新闻滚动项目154 新闻滚动条155 新闻滚动条156 新闻滚动条157 新闻滚动项目158 新闻滚动条159 新闻滚动条160 新闻滚动条161 新闻滚动条162 新闻滚动条163 新闻滚动项目164 新闻滚动条165 新闻滚动条166 新闻滚动条167 新闻滚动条168 新闻滚动条169 新闻滚动条170 新闻滚动条171 新闻滚动项目172 新闻滚动条173 新闻滚动条174 新闻滚动项目175 新闻滚动条176 新闻滚动条177 新闻滚动条178 新闻滚动条179 新闻滚动项目180 新闻滚动条181 新闻滚动项目182 新闻滚动条183 新闻滚动项目184 新闻滚动条185 新闻滚动条186 新闻滚动项目187 新闻滚动条188 新闻滚动项目189 新闻滚动条190 新闻滚动条191 新闻滚动项目192 新闻滚动条193 新闻滚动条194 新闻滚动条195 新闻滚动条196 新闻滚动条197 新闻滚动条198 新闻滚动条199 新闻滚动条200

---

您可以在CSS中使用绝对位置：

容器应具有相对位置 我已经将填充顶部添加到容器中，所以活动项将保留在其中 活动项处于绝对位置，只需使用“顶部”、“左侧”和“边距”属性为其设置所需的位置。 新闻项应从0开始，否则项目1将永远不会处于活动状态。 编辑：现在它几乎被修复了，也许为容器中的滚动添加一个监听器可以帮助改善效果。 Edit2:完成了

var newsItem=0； 设置间隔函数{ newsItem++； $'.list项'.removeClass'active'； $'.list项[data-n='+newsItem+']'.addClass'active'； //获取新位置：第四位置132+容器滚动 var newPos=132+$“阅读新闻”； //重新定位 $'.list项[data-n='+newsItem+']'.css'top'，newPos+'px'； 如果newsItem>=200 newsItem=1； //日志'newsItem newsItem'，newsItem； },1000; $“阅读新闻”。在“滚动”功能上{ var newPos=132+$“阅读新闻”； $'.list item.active'.css'top'，newPos+'px'； }; 阅读新闻，阅读新闻1{ 宽度：263px； 高度：516px； 溢出：自动； 边框：1px实心ccc； } 阅读新闻1{宽度：200px；} 阅读新闻，阅读新闻{ 位置：相对位置； 列表样式：无； 线高：44px； 字体大小：20px； } 李：很活跃{ 位置：绝对位置； 顶部：132px； 背景：4444； 颜色：fff； } 滚动框 新闻滚动条1 新闻滚动条2 新闻滚动项目3 新闻滚动项目4 新闻滚动项目5 新闻滚动项目6 新闻滚动项目7 新闻滚动项目8 新闻滚动项目9 新闻滚动项目10 新闻滚动项目11 新闻滚动项目12 新闻滚动条13 新闻滚动项目14 新闻滚动项目15 新闻滚动项目16 新闻滚动项目17 新闻滚动项目18 新闻滚动项目19 新闻滚动条20 新闻滚动条21 新闻滚动项目22 新闻滚动项目23 新闻滚动条24 新闻滚动条25 新闻滚动项目26 新闻滚动项目27 新闻滚动项目28 新闻滚动项目29 新闻滚动条 g项目30 新闻滚动条31 新闻滚动项目32 新闻滚动条33 新闻滚动条34 新闻滚动项目35 新闻滚动项目36 新闻滚动条37 新闻滚动条38 新闻滚动条39 新闻滚动项目40 新闻滚动条41 新闻滚动项目42 新闻滚动项目43 新闻滚动项目44 新闻滚动项目45 新闻滚动条46 新闻滚动条47 新闻滚动条48 新闻滚动项目49 新闻滚动项目50 新闻滚动条51 新闻滚动项目52 新闻滚动项目53 新闻滚动项目54 新闻滚动项目55 新闻滚动项目56 新闻滚动项目57 新闻滚动项目58 新闻滚动条59 新闻滚动项目60 新闻滚动条61 新闻滚动项目62 新闻滚动条63 新闻滚动项目64 新闻滚动项目65 新闻滚动项目66 新闻滚动项目67 新闻滚动条68 新闻滚动项目69 新闻滚动条70 新闻滚动项目71 新闻滚动项目72 新闻滚动项目73 新闻滚动项目74 新闻滚动项目75 新闻滚动项目76 新闻滚动条77 新闻滚动条78 新闻滚动项目79 新闻滚动条80 新闻滚动条81 新闻滚动项目82 新闻滚动项目83 新闻滚动项目84 新闻滚动项目85 新闻滚动项目86 新闻滚动项目87 新闻滚动项目88 新闻滚动项目89 新闻滚动条90 新闻滚动项目91 新闻滚动项目92 新闻滚动条93 新闻滚动项目94 新闻滚动条95 新闻滚动项目96 新闻滚动项目97 新闻滚动条98 新闻滚动条99 新闻滚动条100 新闻滚动条101 新闻滚动条102 新闻滚动条103 新闻滚动条104 新闻滚动项目105 新闻滚动条106 新闻滚动条107 新闻滚动条108 新闻滚动条109 新闻滚动条110 新闻滚动条111 新闻滚动条112 新闻滚动条113 新闻滚动项目114 新闻滚动条115 新闻滚动条116 新闻滚动项目117 新闻滚动条118 新闻滚动条119 新闻滚动条120 新闻滚动条121 新闻滚动项目122 新闻滚动条123 新闻滚动条124 新闻滚动条125 新闻滚动条126 新闻滚动条127 新闻滚动条128 新闻滚动条129 新闻滚动条130 新闻滚动条131 新闻滚动条132 新闻滚动条133 新闻滚动条134 新闻滚动条135 新闻滚动项目136 新闻滚动条137 新闻滚动条138 新闻滚动条139 新闻滚动条140 新闻滚动条141 新闻滚动项目142 新闻滚动条143 新闻滚动条144 新闻滚动条145 新闻滚动条146 新闻滚动条147 新闻滚动条148 新闻滚动项目149 新闻滚动条150 新闻滚动条151 新闻滚动项目152 新闻滚动条153 新闻滚动项目154 新闻滚动条155 新闻滚动条156 新闻滚动条157 新闻滚动项目158 新闻滚动条159 新闻滚动条160 新闻滚动条161 新闻滚动条162 新闻滚动条163 新闻滚动项目164 新闻滚动条165 新闻滚动条166 新闻滚动条167 新闻滚动条168 新闻滚动条169 新闻滚动条170 新闻滚动条171 新闻滚动项目172 新闻滚动条173 新闻滚动条174 新闻滚动项目175 新闻滚动条176 新闻滚动条177 新闻滚动条178 新闻滚动条179 新闻滚动项目180 新闻滚动条181 新闻滚动项目182 新闻滚动条183 新闻滚动项目184 新闻滚动条185 新闻滚动条186 新闻滚动项目187 新闻滚动条188 新闻滚动项目189 新闻滚动条190 新闻滚动条191 新闻滚动项目192 新闻滚动条193 新闻滚动条194 新闻滚动条195 新闻滚动条196 新闻滚动条197 新闻滚动条198 新闻滚动条199 新闻滚动条200

---

你的意思是固定的还是只让激活的物品可见？@Triby，激活的物品可以放在任何固定的位置，我想要。我能准确地把它放在第四个位置吗？可能吗？请给出一个很好的解决方案，但如果是手动滚动，它会失去上下文吗？我们能为此做些什么