javascript - 如何使阅读项目在滚动时保持在同一位置-6ren

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

转载作者：行者123 更新时间：2023-12-02 22:04:04

我希望在不改变滚动位置的情况下让用户更轻松地阅读。

问题:我想让滚动项位于固定位置(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>

最佳答案

您可以通过 CSS 使用绝对位置:

容器应该有相对位置
我已在容器中添加了顶部填充，因此事件项目将保留在其中
事件项目是绝对定位的，只需使用 top、left 和 margin 属性设置您想要的位置即可。
newsItem 应从 0 开始，否则第 1 项将永远不会处于事件状态。

编辑:现在已经基本修复了，也许在容器中添加滚动监听器可以帮助改善效果。编辑2:完成!

       var newsItem = 0;
       setInterval(function(){
           newsItem++;
           $('.list-item').removeClass('active');
           $('.list-item[data-n="'+newsItem+'"]').addClass('active');
           // Get new position: 4th position (132) + container scroll
           var newPos = 132 + $('#read_news').scrollTop();
           // Set new position
           $('.list-item[data-n="'+newsItem+'"]').css('top', newPos + 'px');
           if(newsItem >= 200) newsItem = 1;
           //console.log('newsItem newsItem',newsItem);
       },1000);
        $('#read_news').on('scroll', function() {
           var newPos = 132 + $('#read_news').scrollTop();
           $('.list-item.active').css('top', newPos + 'px');
        });

#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;
         }
         li.active{
            position:absolute;
            top:132px;
            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>

关于javascript - 如何使阅读项目在滚动时保持在同一位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59775101/

文章推荐： hadoop - 如何选择Hadoop工具以获得更快的性能

文章推荐： xml - 当我添加hive-site.xml时，Hive Shell无法打开

文章推荐： javascript - ReactJS - 获取调度结果的正确方法

javascript - 阻止 body 滚动，但阻止触摸设备上的任何父 div 滚动
如果附加了 'not-scroll' 类，我希望我的 body 不滚动，否则它应该正常工作。我已经搜索这个问题两天了，但找不到任何适合我的解决方案。我想要的是向 body 添加一个 class，并
iOS Safari - 滚动 iFrame 导致下面的 div 滚动
我发现似乎是 iOS Safari 中的错误(我正在 iOS 8 上进行测试)。当绝对定位的 iFrame 漂浮在一段可滚动内容上方时，滚动 iFrame 也会滚动下面的内容。以下 HTML (ava
javascript - 如何启用 Safari 滚动 SVG(滚动 div 中的对象标签)？
我有以下代码来显示一系列投资组合图片，这些图片以 SVG 格式存储在滚动 div 中: 在 Safari 中滚动使用两根手指或鼠标滚轮当光标位于 SVG 之一上时不起作用。该页
Javascript 滚动
我想用 javascript 做的是: 一旦你向下滚动页面，将#sidebar-box-fixed 的位置从 position: relative; 更改为定位:固定；。改回position:rela
Elasticsearch 滚动
我对 Elasticsearch 的滚动功能有点困惑。在 elasticsearch 中，每当用户在结果集上滚动时，是否可以每次调用搜索 API？来自文档 "search_type" => "scan
Javascript 滚动
我试图做到这一点，以便当我向上或向下滚动页面时，它会运行不同的相应功能。我发现了一个类似的问题here但我已经尝试了他们的答案并且没有运气。注意:此页面没有正常显示的滚动条。没有地方可以滚动。 bo
gtk - 滚动 GtkDrawingArea
(C语言，GTK库) 在我的表单上，我有一个 GtkDrawingArea 小部件，我在上面使用 Cairo 绘制 GdkPixbufs(从文件加载)。我想要完成的是能够在窗口大小保持固定的情况下使用
SwiftUI 滚动/列表滚动事件
最近我一直在尝试创建一个拉到(刷新，加载更多)swiftUI ScrollView !!，灵感来自 https://cocoapods.org/pods/SwiftPullToRefresh 我正在努
jquery - 拖放 + 滚动
我正在开发一个应用程序，其中有两个带有可放置区域的列表和一个带有可拖动项目的侧面菜单。当我滚动屏幕时，项目的位置困惑。我试图在谷歌上寻找一些东西，最后得到了这个问题:jQuery draggabl
iphone - UIWebView 滚动
我在 UIWebView 中加载了一个 HTML 表单，而我的 UIWebView 恰好从 View 的中间开始并扩展。我必须锁定此 webView 不滚动并将其放在 ScrollView 之上以允许
javascript - 每个元素上的淡入淡出 - 滚动
如何在每个元素而不是整个元素上应用淡入淡出(与其高度相比)？ HTML: CSS: * { padding: 0; margin: 0; box-sizing: border
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - JTextField 滚动
我制作这个程序是为了好玩，但我被卡住了，因为程序在屏幕外运行。如何在不完全更改代码的情况下实现滚动条。 public static void main(String args[]) throws IO
flutter - 滚动 PageView
我想使用带有垂直轴的 PageView 并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时页面不滚动...仅页面单击并向上/向下滑动时滚动。有什么办法吗？我想保留属性 pageSnapping:
java - 滚动()和添加()
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
jquery - 滚动/跟随侧边栏帮助
使用 jquery 技术从 css-tricks.com 获得滚动/跟随侧边栏，如果您不知道我在说什么，这里是代码: $(function() { var $sidebar = $
Jquery-手机滑动菜单面板+滚动
我是 jQuery Mobile 新手。我需要向我的应用程序添加 Facebook 滑动面板功能。我经历了 sliding menu panel ，它工作正常，但我在菜单面板中的内容超出了窗口大小，
javascript - 如何在js或jQuery中检测ctrl +滚动？
有没有办法在 js 或 jQuery 或任何其他工具中检测 ctrl + 滚动。我正在尝试执行一些动态布局代码，我需要检测不同分辨率下的屏幕宽度，我通过使用 setTimeout() 的计时器实现了这
jquery 滚动 + 可拖动项目
我有一部分html代码:
c# - 滚动 RichTextBox
我想控制 RichTextBox 滚动，但在控件中找不到任何方法来执行此操作。这样做的原因是我希望当鼠标光标位于 RichTextBox 控件上时鼠标滚轮滚动有效(它没有事件焦点:鼠标滚轮事件由表单

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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