尽管滚动，如何使阅读项目保持在同一位置

Question

我希望在不更改滚动位置的情况下使用户阅读更容易。

问题：我想使滚动项位于固定位置（item类为.active）。

我希望始终固定阅读位置，以使内容始终对用户可见。

我尝试过以下代码：

         var newsItem = 1;
       setInterval(function(){
           newsItem++;
           $('.list-item').removeClass('active');
           $('.list-item[data-n="'+newsItem+'"]').addClass('active');
           if(newsItem >= 200) newsItem = 1;
           //console.log('newsItem newsItem',newsItem);
       },1000);

#read_news,#read_news1{
            width: 263px;
            height: 516px;
            overflow: auto;
            border: 1px solid #ccc;
         }
         #read_news1{width:200px;}
         #read_news ul,#read_news1 ul{
            list-style: none;
            line-height: 44px;
            font-size: 20px;
         }
         li.active{
            background: #444444;
            color: #fff;
         }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Scrolling box</h1>


<div id="read_news">
    <ul>
        <li class="list-item" data-n="1">news scrolling item 1</li>
        <li class="list-item" data-n="2">news scrolling item 2</li>
        <li class="list-item" data-n="3">news scrolling item 3</li>
        <li class="list-item" data-n="4">news scrolling item 4</li>
        <li class="list-item" data-n="5">news scrolling item 5</li>
        <li class="list-item" data-n="6">news scrolling item 6</li>
        <li class="list-item" data-n="7">news scrolling item 7</li>
        <li class="list-item" data-n="8">news scrolling item 8</li>
        <li class="list-item" data-n="9">news scrolling item 9</li>
        <li class="list-item" data-n="10">news scrolling item 10</li>
        <li class="list-item" data-n="11">news scrolling item 11</li>
        <li class="list-item" data-n="12">news scrolling item 12</li>
        <li class="list-item" data-n="13">news scrolling item 13</li>
        <li class="list-item" data-n="14">news scrolling item 14</li>
        <li class="list-item" data-n="15">news scrolling item 15</li>
        <li class="list-item" data-n="16">news scrolling item 16</li>
        <li class="list-item" data-n="17">news scrolling item 17</li>
        <li class="list-item" data-n="18">news scrolling item 18</li>
        <li class="list-item" data-n="19">news scrolling item 19</li>
        <li class="list-item" data-n="20">news scrolling item 20</li>
        <li class="list-item" data-n="21">news scrolling item 21</li>
        <li class="list-item" data-n="22">news scrolling item 22</li>
        <li class="list-item" data-n="23">news scrolling item 23</li>
        <li class="list-item" data-n="24">news scrolling item 24</li>
        <li class="list-item" data-n="25">news scrolling item 25</li>
        <li class="list-item" data-n="26">news scrolling item 26</li>
        <li class="list-item" data-n="27">news scrolling item 27</li>
        <li class="list-item" data-n="28">news scrolling item 28</li>
        <li class="list-item" data-n="29">news scrolling item 29</li>
        <li class="list-item" data-n="30">news scrolling item 30</li>
        <li class="list-item" data-n="31">news scrolling item 31</li>
        <li class="list-item" data-n="32">news scrolling item 32</li>
        <li class="list-item" data-n="33">news scrolling item 33</li>
        <li class="list-item" data-n="34">news scrolling item 34</li>
        <li class="list-item" data-n="35">news scrolling item 35</li>
        <li class="list-item" data-n="36">news scrolling item 36</li>
        <li class="list-item" data-n="37">news scrolling item 37</li>
        <li class="list-item" data-n="38">news scrolling item 38</li>
        <li class="list-item" data-n="39">news scrolling item 39</li>
        <li class="list-item" data-n="40">news scrolling item 40</li>
        <li class="list-item" data-n="41">news scrolling item 41</li>
        <li class="list-item" data-n="42">news scrolling item 42</li>
        <li class="list-item" data-n="43">news scrolling item 43</li>
        <li class="list-item" data-n="44">news scrolling item 44</li>
        <li class="list-item" data-n="45">news scrolling item 45</li>
        <li class="list-item" data-n="46">news scrolling item 46</li>
        <li class="list-item" data-n="47">news scrolling item 47</li>
        <li class="list-item" data-n="48">news scrolling item 48</li>
        <li class="list-item" data-n="49">news scrolling item 49</li>
        <li class="list-item" data-n="50">news scrolling item 50</li>
        <li class="list-item" data-n="51">news scrolling item 51</li>
        <li class="list-item" data-n="52">news scrolling item 52</li>
        <li class="list-item" data-n="53">news scrolling item 53</li>
        <li class="list-item" data-n="54">news scrolling item 54</li>
        <li class="list-item" data-n="55">news scrolling item 55</li>
        <li class="list-item" data-n="56">news scrolling item 56</li>
        <li class="list-item" data-n="57">news scrolling item 57</li>
        <li class="list-item" data-n="58">news scrolling item 58</li>
        <li class="list-item" data-n="59">news scrolling item 59</li>
        <li class="list-item" data-n="60">news scrolling item 60</li>
        <li class="list-item" data-n="61">news scrolling item 61</li>
        <li class="list-item" data-n="62">news scrolling item 62</li>
        <li class="list-item" data-n="63">news scrolling item 63</li>
        <li class="list-item" data-n="64">news scrolling item 64</li>
        <li class="list-item" data-n="65">news scrolling item 65</li>
        <li class="list-item" data-n="66">news scrolling item 66</li>
        <li class="list-item" data-n="67">news scrolling item 67</li>
        <li class="list-item" data-n="68">news scrolling item 68</li>
        <li class="list-item" data-n="69">news scrolling item 69</li>
        <li class="list-item" data-n="70">news scrolling item 70</li>
        <li class="list-item" data-n="71">news scrolling item 71</li>
        <li class="list-item" data-n="72">news scrolling item 72</li>
        <li class="list-item" data-n="73">news scrolling item 73</li>
        <li class="list-item" data-n="74">news scrolling item 74</li>
        <li class="list-item" data-n="75">news scrolling item 75</li>
        <li class="list-item" data-n="76">news scrolling item 76</li>
        <li class="list-item" data-n="77">news scrolling item 77</li>
        <li class="list-item" data-n="78">news scrolling item 78</li>
        <li class="list-item" data-n="79">news scrolling item 79</li>
        <li class="list-item" data-n="80">news scrolling item 80</li>
        <li class="list-item" data-n="81">news scrolling item 81</li>
        <li class="list-item" data-n="82">news scrolling item 82</li>
        <li class="list-item" data-n="83">news scrolling item 83</li>
        <li class="list-item" data-n="84">news scrolling item 84</li>
        <li class="list-item" data-n="85">news scrolling item 85</li>
        <li class="list-item" data-n="86">news scrolling item 86</li>
        <li class="list-item" data-n="87">news scrolling item 87</li>
        <li class="list-item" data-n="88">news scrolling item 88</li>
        <li class="list-item" data-n="89">news scrolling item 89</li>
        <li class="list-item" data-n="90">news scrolling item 90</li>
        <li class="list-item" data-n="91">news scrolling item 91</li>
        <li class="list-item" data-n="92">news scrolling item 92</li>
        <li class="list-item" data-n="93">news scrolling item 93</li>
        <li class="list-item" data-n="94">news scrolling item 94</li>
        <li class="list-item" data-n="95">news scrolling item 95</li>
        <li class="list-item" data-n="96">news scrolling item 96</li>
        <li class="list-item" data-n="97">news scrolling item 97</li>
        <li class="list-item" data-n="98">news scrolling item 98</li>
        <li class="list-item" data-n="99">news scrolling item 99</li>
        <li class="list-item" data-n="100">news scrolling item 100</li>
        <li class="list-item" data-n="101">news scrolling item 101</li>
        <li class="list-item" data-n="102">news scrolling item 102</li>
        <li class="list-item" data-n="103">news scrolling item 103</li>
        <li class="list-item" data-n="104">news scrolling item 104</li>
        <li class="list-item" data-n="105">news scrolling item 105</li>
        <li class="list-item" data-n="106">news scrolling item 106</li>
        <li class="list-item" data-n="107">news scrolling item 107</li>
        <li class="list-item" data-n="108">news scrolling item 108</li>
        <li class="list-item" data-n="109">news scrolling item 109</li>
        <li class="list-item" data-n="110">news scrolling item 110</li>
        <li class="list-item" data-n="111">news scrolling item 111</li>
        <li class="list-item" data-n="112">news scrolling item 112</li>
        <li class="list-item" data-n="113">news scrolling item 113</li>
        <li class="list-item" data-n="114">news scrolling item 114</li>
        <li class="list-item" data-n="115">news scrolling item 115</li>
        <li class="list-item" data-n="116">news scrolling item 116</li>
        <li class="list-item" data-n="117">news scrolling item 117</li>
        <li class="list-item" data-n="118">news scrolling item 118</li>
        <li class="list-item" data-n="119">news scrolling item 119</li>
        <li class="list-item" data-n="120">news scrolling item 120</li>
        <li class="list-item" data-n="121">news scrolling item 121</li>
        <li class="list-item" data-n="122">news scrolling item 122</li>
        <li class="list-item" data-n="123">news scrolling item 123</li>
        <li class="list-item" data-n="124">news scrolling item 124</li>
        <li class="list-item" data-n="125">news scrolling item 125</li>
        <li class="list-item" data-n="126">news scrolling item 126</li>
        <li class="list-item" data-n="127">news scrolling item 127</li>
        <li class="list-item" data-n="128">news scrolling item 128</li>
        <li class="list-item" data-n="129">news scrolling item 129</li>
        <li class="list-item" data-n="130">news scrolling item 130</li>
        <li class="list-item" data-n="131">news scrolling item 131</li>
        <li class="list-item" data-n="132">news scrolling item 132</li>
        <li class="list-item" data-n="133">news scrolling item 133</li>
        <li class="list-item" data-n="134">news scrolling item 134</li>
        <li class="list-item" data-n="135">news scrolling item 135</li>
        <li class="list-item" data-n="136">news scrolling item 136</li>
        <li class="list-item" data-n="137">news scrolling item 137</li>
        <li class="list-item" data-n="138">news scrolling item 138</li>
        <li class="list-item" data-n="139">news scrolling item 139</li>
        <li class="list-item" data-n="140">news scrolling item 140</li>
        <li class="list-item" data-n="141">news scrolling item 141</li>
        <li class="list-item" data-n="142">news scrolling item 142</li>
        <li class="list-item" data-n="143">news scrolling item 143</li>
        <li class="list-item" data-n="144">news scrolling item 144</li>
        <li class="list-item" data-n="145">news scrolling item 145</li>
        <li class="list-item" data-n="146">news scrolling item 146</li>
        <li class="list-item" data-n="147">news scrolling item 147</li>
        <li class="list-item" data-n="148">news scrolling item 148</li>
        <li class="list-item" data-n="149">news scrolling item 149</li>
        <li class="list-item" data-n="150">news scrolling item 150</li>
        <li class="list-item" data-n="151">news scrolling item 151</li>
        <li class="list-item" data-n="152">news scrolling item 152</li>
        <li class="list-item" data-n="153">news scrolling item 153</li>
        <li class="list-item" data-n="154">news scrolling item 154</li>
        <li class="list-item" data-n="155">news scrolling item 155</li>
        <li class="list-item" data-n="156">news scrolling item 156</li>
        <li class="list-item" data-n="157">news scrolling item 157</li>
        <li class="list-item" data-n="158">news scrolling item 158</li>
        <li class="list-item" data-n="159">news scrolling item 159</li>
        <li class="list-item" data-n="160">news scrolling item 160</li>
        <li class="list-item" data-n="161">news scrolling item 161</li>
        <li class="list-item" data-n="162">news scrolling item 162</li>
        <li class="list-item" data-n="163">news scrolling item 163</li>
        <li class="list-item" data-n="164">news scrolling item 164</li>
        <li class="list-item" data-n="165">news scrolling item 165</li>
        <li class="list-item" data-n="166">news scrolling item 166</li>
        <li class="list-item" data-n="167">news scrolling item 167</li>
        <li class="list-item" data-n="168">news scrolling item 168</li>
        <li class="list-item" data-n="169">news scrolling item 169</li>
        <li class="list-item" data-n="170">news scrolling item 170</li>
        <li class="list-item" data-n="171">news scrolling item 171</li>
        <li class="list-item" data-n="172">news scrolling item 172</li>
        <li class="list-item" data-n="173">news scrolling item 173</li>
        <li class="list-item" data-n="174">news scrolling item 174</li>
        <li class="list-item" data-n="175">news scrolling item 175</li>
        <li class="list-item" data-n="176">news scrolling item 176</li>
        <li class="list-item" data-n="177">news scrolling item 177</li>
        <li class="list-item" data-n="178">news scrolling item 178</li>
        <li class="list-item" data-n="179">news scrolling item 179</li>
        <li class="list-item" data-n="180">news scrolling item 180</li>
        <li class="list-item" data-n="181">news scrolling item 181</li>
        <li class="list-item" data-n="182">news scrolling item 182</li>
        <li class="list-item" data-n="183">news scrolling item 183</li>
        <li class="list-item" data-n="184">news scrolling item 184</li>
        <li class="list-item" data-n="185">news scrolling item 185</li>
        <li class="list-item" data-n="186">news scrolling item 186</li>
        <li class="list-item" data-n="187">news scrolling item 187</li>
        <li class="list-item" data-n="188">news scrolling item 188</li>
        <li class="list-item" data-n="189">news scrolling item 189</li>
        <li class="list-item" data-n="190">news scrolling item 190</li>
        <li class="list-item" data-n="191">news scrolling item 191</li>
        <li class="list-item" data-n="192">news scrolling item 192</li>
        <li class="list-item" data-n="193">news scrolling item 193</li>
        <li class="list-item" data-n="194">news scrolling item 194</li>
        <li class="list-item" data-n="195">news scrolling item 195</li>
        <li class="list-item" data-n="196">news scrolling item 196</li>
        <li class="list-item" data-n="197">news scrolling item 197</li>
        <li class="list-item" data-n="198">news scrolling item 198</li>
        <li class="list-item" data-n="199">news scrolling item 199</li>
        <li class="list-item" data-n="200">news scrolling item 200</li>
    </ul>
   </div>

Answer 1

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

• 容器应具有相对位置
• 我已将填充顶部添加到容器中，所以活动项将保留在其中
• 活动项目是绝对放置的，只需使用顶部，左侧和边距属性设置所需的位置。

         var newsItem = 1;
       setInterval(function(){
           newsItem++;
           $('.list-item').removeClass('active');
           $('.list-item[data-n="'+newsItem+'"]').addClass('active');
           if(newsItem >= 200) newsItem = 1;
           //console.log('newsItem newsItem',newsItem);
       },1000);

#read_news,#read_news1{
            width: 263px;
            height: 516px;
            overflow: auto;
            border: 1px solid #ccc;
         }
         #read_news1{width:200px;}
         #read_news ul,#read_news1 ul{
            position:relative;
            list-style: none;
            line-height: 44px;
            font-size: 20px;
            padding-top:20px;
         }
         li.active{
            position:absolute;
            top:0;
            left:15;
            margin-top:-20px;
            background: #444444;
            color: #fff;
         }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Scrolling box</h1>


<div id="read_news">
    <ul>
        <li class="list-item" data-n="1">news scrolling item 1</li>
        <li class="list-item" data-n="2">news scrolling item 2</li>
        <li class="list-item" data-n="3">news scrolling item 3</li>
        <li class="list-item" data-n="4">news scrolling item 4</li>
        <li class="list-item" data-n="5">news scrolling item 5</li>
        <li class="list-item" data-n="6">news scrolling item 6</li>
        <li class="list-item" data-n="7">news scrolling item 7</li>
        <li class="list-item" data-n="8">news scrolling item 8</li>
        <li class="list-item" data-n="9">news scrolling item 9</li>
        <li class="list-item" data-n="10">news scrolling item 10</li>
        <li class="list-item" data-n="11">news scrolling item 11</li>
        <li class="list-item" data-n="12">news scrolling item 12</li>
        <li class="list-item" data-n="13">news scrolling item 13</li>
        <li class="list-item" data-n="14">news scrolling item 14</li>
        <li class="list-item" data-n="15">news scrolling item 15</li>
        <li class="list-item" data-n="16">news scrolling item 16</li>
        <li class="list-item" data-n="17">news scrolling item 17</li>
        <li class="list-item" data-n="18">news scrolling item 18</li>
        <li class="list-item" data-n="19">news scrolling item 19</li>
        <li class="list-item" data-n="20">news scrolling item 20</li>
        <li class="list-item" data-n="21">news scrolling item 21</li>
        <li class="list-item" data-n="22">news scrolling item 22</li>
        <li class="list-item" data-n="23">news scrolling item 23</li>
        <li class="list-item" data-n="24">news scrolling item 24</li>
        <li class="list-item" data-n="25">news scrolling item 25</li>
        <li class="list-item" data-n="26">news scrolling item 26</li>
        <li class="list-item" data-n="27">news scrolling item 27</li>
        <li class="list-item" data-n="28">news scrolling item 28</li>
        <li class="list-item" data-n="29">news scrolling item 29</li>
        <li class="list-item" data-n="30">news scrolling item 30</li>
        <li class="list-item" data-n="31">news scrolling item 31</li>
        <li class="list-item" data-n="32">news scrolling item 32</li>
        <li class="list-item" data-n="33">news scrolling item 33</li>
        <li class="list-item" data-n="34">news scrolling item 34</li>
        <li class="list-item" data-n="35">news scrolling item 35</li>
        <li class="list-item" data-n="36">news scrolling item 36</li>
        <li class="list-item" data-n="37">news scrolling item 37</li>
        <li class="list-item" data-n="38">news scrolling item 38</li>
        <li class="list-item" data-n="39">news scrolling item 39</li>
        <li class="list-item" data-n="40">news scrolling item 40</li>
        <li class="list-item" data-n="41">news scrolling item 41</li>
        <li class="list-item" data-n="42">news scrolling item 42</li>
        <li class="list-item" data-n="43">news scrolling item 43</li>
        <li class="list-item" data-n="44">news scrolling item 44</li>
        <li class="list-item" data-n="45">news scrolling item 45</li>
        <li class="list-item" data-n="46">news scrolling item 46</li>
        <li class="list-item" data-n="47">news scrolling item 47</li>
        <li class="list-item" data-n="48">news scrolling item 48</li>
        <li class="list-item" data-n="49">news scrolling item 49</li>
        <li class="list-item" data-n="50">news scrolling item 50</li>
        <li class="list-item" data-n="51">news scrolling item 51</li>
        <li class="list-item" data-n="52">news scrolling item 52</li>
        <li class="list-item" data-n="53">news scrolling item 53</li>
        <li class="list-item" data-n="54">news scrolling item 54</li>
        <li class="list-item" data-n="55">news scrolling item 55</li>
        <li class="list-item" data-n="56">news scrolling item 56</li>
        <li class="list-item" data-n="57">news scrolling item 57</li>
        <li class="list-item" data-n="58">news scrolling item 58</li>
        <li class="list-item" data-n="59">news scrolling item 59</li>
        <li class="list-item" data-n="60">news scrolling item 60</li>
        <li class="list-item" data-n="61">news scrolling item 61</li>
        <li class="list-item" data-n="62">news scrolling item 62</li>
        <li class="list-item" data-n="63">news scrolling item 63</li>
        <li class="list-item" data-n="64">news scrolling item 64</li>
        <li class="list-item" data-n="65">news scrolling item 65</li>
        <li class="list-item" data-n="66">news scrolling item 66</li>
        <li class="list-item" data-n="67">news scrolling item 67</li>
        <li class="list-item" data-n="68">news scrolling item 68</li>
        <li class="list-item" data-n="69">news scrolling item 69</li>
        <li class="list-item" data-n="70">news scrolling item 70</li>
        <li class="list-item" data-n="71">news scrolling item 71</li>
        <li class="list-item" data-n="72">news scrolling item 72</li>
        <li class="list-item" data-n="73">news scrolling item 73</li>
        <li class="list-item" data-n="74">news scrolling item 74</li>
        <li class="list-item" data-n="75">news scrolling item 75</li>
        <li class="list-item" data-n="76">news scrolling item 76</li>
        <li class="list-item" data-n="77">news scrolling item 77</li>
        <li class="list-item" data-n="78">news scrolling item 78</li>
        <li class="list-item" data-n="79">news scrolling item 79</li>
        <li class="list-item" data-n="80">news scrolling item 80</li>
        <li class="list-item" data-n="81">news scrolling item 81</li>
        <li class="list-item" data-n="82">news scrolling item 82</li>
        <li class="list-item" data-n="83">news scrolling item 83</li>
        <li class="list-item" data-n="84">news scrolling item 84</li>
        <li class="list-item" data-n="85">news scrolling item 85</li>
        <li class="list-item" data-n="86">news scrolling item 86</li>
        <li class="list-item" data-n="87">news scrolling item 87</li>
        <li class="list-item" data-n="88">news scrolling item 88</li>
        <li class="list-item" data-n="89">news scrolling item 89</li>
        <li class="list-item" data-n="90">news scrolling item 90</li>
        <li class="list-item" data-n="91">news scrolling item 91</li>
        <li class="list-item" data-n="92">news scrolling item 92</li>
        <li class="list-item" data-n="93">news scrolling item 93</li>
        <li class="list-item" data-n="94">news scrolling item 94</li>
        <li class="list-item" data-n="95">news scrolling item 95</li>
        <li class="list-item" data-n="96">news scrolling item 96</li>
        <li class="list-item" data-n="97">news scrolling item 97</li>
        <li class="list-item" data-n="98">news scrolling item 98</li>
        <li class="list-item" data-n="99">news scrolling item 99</li>
        <li class="list-item" data-n="100">news scrolling item 100</li>
        <li class="list-item" data-n="101">news scrolling item 101</li>
        <li class="list-item" data-n="102">news scrolling item 102</li>
        <li class="list-item" data-n="103">news scrolling item 103</li>
        <li class="list-item" data-n="104">news scrolling item 104</li>
        <li class="list-item" data-n="105">news scrolling item 105</li>
        <li class="list-item" data-n="106">news scrolling item 106</li>
        <li class="list-item" data-n="107">news scrolling item 107</li>
        <li class="list-item" data-n="108">news scrolling item 108</li>
        <li class="list-item" data-n="109">news scrolling item 109</li>
        <li class="list-item" data-n="110">news scrolling item 110</li>
        <li class="list-item" data-n="111">news scrolling item 111</li>
        <li class="list-item" data-n="112">news scrolling item 112</li>
        <li class="list-item" data-n="113">news scrolling item 113</li>
        <li class="list-item" data-n="114">news scrolling item 114</li>
        <li class="list-item" data-n="115">news scrolling item 115</li>
        <li class="list-item" data-n="116">news scrolling item 116</li>
        <li class="list-item" data-n="117">news scrolling item 117</li>
        <li class="list-item" data-n="118">news scrolling item 118</li>
        <li class="list-item" data-n="119">news scrolling item 119</li>
        <li class="list-item" data-n="120">news scrolling item 120</li>
        <li class="list-item" data-n="121">news scrolling item 121</li>
        <li class="list-item" data-n="122">news scrolling item 122</li>
        <li class="list-item" data-n="123">news scrolling item 123</li>
        <li class="list-item" data-n="124">news scrolling item 124</li>
        <li class="list-item" data-n="125">news scrolling item 125</li>
        <li class="list-item" data-n="126">news scrolling item 126</li>
        <li class="list-item" data-n="127">news scrolling item 127</li>
        <li class="list-item" data-n="128">news scrolling item 128</li>
        <li class="list-item" data-n="129">news scrolling item 129</li>
        <li class="list-item" data-n="130">news scrolling item 130</li>
        <li class="list-item" data-n="131">news scrolling item 131</li>
        <li class="list-item" data-n="132">news scrolling item 132</li>
        <li class="list-item" data-n="133">news scrolling item 133</li>
        <li class="list-item" data-n="134">news scrolling item 134</li>
        <li class="list-item" data-n="135">news scrolling item 135</li>
        <li class="list-item" data-n="136">news scrolling item 136</li>
        <li class="list-item" data-n="137">news scrolling item 137</li>
        <li class="list-item" data-n="138">news scrolling item 138</li>
        <li class="list-item" data-n="139">news scrolling item 139</li>
        <li class="list-item" data-n="140">news scrolling item 140</li>
        <li class="list-item" data-n="141">news scrolling item 141</li>
        <li class="list-item" data-n="142">news scrolling item 142</li>
        <li class="list-item" data-n="143">news scrolling item 143</li>
        <li class="list-item" data-n="144">news scrolling item 144</li>
        <li class="list-item" data-n="145">news scrolling item 145</li>
        <li class="list-item" data-n="146">news scrolling item 146</li>
        <li class="list-item" data-n="147">news scrolling item 147</li>
        <li class="list-item" data-n="148">news scrolling item 148</li>
        <li class="list-item" data-n="149">news scrolling item 149</li>
        <li class="list-item" data-n="150">news scrolling item 150</li>
        <li class="list-item" data-n="151">news scrolling item 151</li>
        <li class="list-item" data-n="152">news scrolling item 152</li>
        <li class="list-item" data-n="153">news scrolling item 153</li>
        <li class="list-item" data-n="154">news scrolling item 154</li>
        <li class="list-item" data-n="155">news scrolling item 155</li>
        <li class="list-item" data-n="156">news scrolling item 156</li>
        <li class="list-item" data-n="157">news scrolling item 157</li>
        <li class="list-item" data-n="158">news scrolling item 158</li>
        <li class="list-item" data-n="159">news scrolling item 159</li>
        <li class="list-item" data-n="160">news scrolling item 160</li>
        <li class="list-item" data-n="161">news scrolling item 161</li>
        <li class="list-item" data-n="162">news scrolling item 162</li>
        <li class="list-item" data-n="163">news scrolling item 163</li>
        <li class="list-item" data-n="164">news scrolling item 164</li>
        <li class="list-item" data-n="165">news scrolling item 165</li>
        <li class="list-item" data-n="166">news scrolling item 166</li>
        <li class="list-item" data-n="167">news scrolling item 167</li>
        <li class="list-item" data-n="168">news scrolling item 168</li>
        <li class="list-item" data-n="169">news scrolling item 169</li>
        <li class="list-item" data-n="170">news scrolling item 170</li>
        <li class="list-item" data-n="171">news scrolling item 171</li>
        <li class="list-item" data-n="172">news scrolling item 172</li>
        <li class="list-item" data-n="173">news scrolling item 173</li>
        <li class="list-item" data-n="174">news scrolling item 174</li>
        <li class="list-item" data-n="175">news scrolling item 175</li>
        <li class="list-item" data-n="176">news scrolling item 176</li>
        <li class="list-item" data-n="177">news scrolling item 177</li>
        <li class="list-item" data-n="178">news scrolling item 178</li>
        <li class="list-item" data-n="179">news scrolling item 179</li>
        <li class="list-item" data-n="180">news scrolling item 180</li>
        <li class="list-item" data-n="181">news scrolling item 181</li>
        <li class="list-item" data-n="182">news scrolling item 182</li>
        <li class="list-item" data-n="183">news scrolling item 183</li>
        <li class="list-item" data-n="184">news scrolling item 184</li>
        <li class="list-item" data-n="185">news scrolling item 185</li>
        <li class="list-item" data-n="186">news scrolling item 186</li>
        <li class="list-item" data-n="187">news scrolling item 187</li>
        <li class="list-item" data-n="188">news scrolling item 188</li>
        <li class="list-item" data-n="189">news scrolling item 189</li>
        <li class="list-item" data-n="190">news scrolling item 190</li>
        <li class="list-item" data-n="191">news scrolling item 191</li>
        <li class="list-item" data-n="192">news scrolling item 192</li>
        <li class="list-item" data-n="193">news scrolling item 193</li>
        <li class="list-item" data-n="194">news scrolling item 194</li>
        <li class="list-item" data-n="195">news scrolling item 195</li>
        <li class="list-item" data-n="196">news scrolling item 196</li>
        <li class="list-item" data-n="197">news scrolling item 197</li>
        <li class="list-item" data-n="198">news scrolling item 198</li>
        <li class="list-item" data-n="199">news scrolling item 199</li>
        <li class="list-item" data-n="200">news scrolling item 200</li>
    </ul>
   </div>