我想要div的滚动条，但我不希望它在滚动时更改其子位置。
让我描述我的完整问题：
有一个div。 div内有一个table。在div滚动时，我使用JavaScript填充表格行中的新数据。这是单独的逻辑，如何使用滚动高度填充表中的数据。问题是由于滚动表格里面的div也移动了。
我尝试将position:fixed和position:absolute用于table。但这也行不通。
任何想法或解决方法都会有所帮助。
提前致谢。
table, th, td {
border: 1px solid black;
white-space:nowrap;
padding-left:5px;
table-layout:fixed;
width: 100%;
padding-right:5px;
}
.vrow{
display:table;
table-layout: fixed;
width:100%;
/* position :absolute; */
display :table;
}
.vrow td{
width: 50px;
}
.fixed-header th{
width: 50px;
}
div.main-table {
overflow:auto;
width:200px;
height:300px;
table-layout:fixed;
}
div.fixed-header-table {
position:relative;
}
div.fixed-header-wrapper {
overflow:hidden;
/* width: 999999999999999999px; */
}
/* style for two seprate div */
#sidebar {
width: 50%;
min-height: 400px;
background: #EFF0F1;
float: left;
}
#main{
width: 500px;
overflow: hidden;
}
#page-wrap {
width: 50%;
background: #FFFFCC;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
#outerDiv{
width: 500px;
overflow: hidden;
position: relative;
}
#dataTable{
/* position: fixed; */
}
.container{
overflow-y: auto;
max-height: 300px;
width : 500px;
position :relative;
padding : 0;
border : 1px solid black;
}
.scroller_cls{
opacity : 0;
top :0;
left : 0;
width : 1px;
}<div>
<div id="outerDiv">
<div id="main" class="clear">
<div>
<div class="fixed-header-wrapper">
<div id="fixed-header-table1" class="fixed-header-table" style="left: 0px;"><table><tr class="fixed-header"><th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th></tr></table></div>
</div>
</div>
</div>
</div>
<div class="container" id="main_btl_container"><table cellpadding="0px" cellspacing="0px" id="dataTable"><tr class="vrow"><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr class="vrow"><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr class="vrow"><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr><tr class="vrow"><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr><tr class="vrow"><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td></tr><tr class="vrow"><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td></tr><tr class="vrow"><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td><td>6</td></tr><tr class="vrow"><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td><td>7</td></tr><tr class="vrow"><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td></tr><tr class="vrow"><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td><td>9</td></tr><tr class="vrow"><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td><td>10</td></tr><tr class="vrow"><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td><td>11</td></tr><tr class="vrow"><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td></tr><tr class="vrow"><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td><td>13</td></tr><tr class="vrow"><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td><td>14</td></tr><tr class="vrow"><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td><td>15</td></tr><tr class="vrow"><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td><td>16</td></tr><tr class="vrow"><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td><td>17</td></tr><tr class="vrow"><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td><td>18</td></tr><tr class="vrow"><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td><td>19</td></tr><tr class="vrow"><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td><td>20</td></tr><tr class="vrow"><td>21</td><td>21</td><td>21</td><td>21</td><td>21</td><td>21</td><td>21</td><td>21</td><td>21</td><td>21</td><td>21</td></tr><tr class="vrow"><td>22</td><td>22</td><td>22</td><td>22</td><td>22</td><td>22</td><td>22</td><td>22</td><td>22</td><td>22</td><td>22</td></tr><tr class="vrow"><td>23</td><td>23</td><td>23</td><td>23</td><td>23</td><td>23</td><td>23</td><td>23</td><td>23</td><td>23</td><td>23</td></tr><tr class="vrow"><td>24</td><td>24</td><td>24</td><td>24</td><td>24</td><td>24</td><td>24</td><td>24</td><td>24</td><td>24</td><td>24</td></tr><tr class="vrow"><td>25</td><td>25</td><td>25</td><td>25</td><td>25</td><td>25</td><td>25</td><td>25</td><td>25</td><td>25</td><td>25</td></tr><tr class="vrow"><td>26</td><td>26</td><td>26</td><td>26</td><td>26</td><td>26</td><td>26</td><td>26</td><td>26</td><td>26</td><td>26</td></tr><tr class="vrow"><td>27</td><td>27</td><td>27</td><td>27</td><td>27</td><td>27</td><td>27</td><td>27</td><td>27</td><td>27</td><td>27</td></tr><tr class="vrow"><td>28</td><td>28</td><td>28</td><td>28</td><td>28</td><td>28</td><td>28</td><td>28</td><td>28</td><td>28</td><td>28</td></tr><tr class="vrow"><td>29</td><td>29</td><td>29</td><td>29</td><td>29</td><td>29</td><td>29</td><td>29</td><td>29</td><td>29</td><td>29</td></tr><tr class="vrow"><td>30</td><td>30</td><td>30</td><td>30</td><td>30</td><td>30</td><td>30</td><td>30</td><td>30</td><td>30</td><td>30</td></tr><tr class="vrow"><td>31</td><td>31</td><td>31</td><td>31</td><td>31</td><td>31</td><td>31</td><td>31</td><td>31</td><td>31</td><td>31</td></tr><tr class="vrow"><td>32</td><td>32</td><td>32</td><td>32</td><td>32</td><td>32</td><td>32</td><td>32</td><td>32</td><td>32</td><td>32</td></tr><tr class="vrow"><td>33</td><td>33</td><td>33</td><td>33</td><td>33</td><td>33</td><td>33</td><td>33</td><td>33</td><td>33</td><td>33</td></tr><tr class="vrow"><td>34</td><td>34</td><td>34</td><td>34</td><td>34</td><td>34</td><td>34</td><td>34</td><td>34</td><td>34</td><td>34</td></tr><tr class="vrow"><td>35</td><td>35</td><td>35</td><td>35</td><td>35</td><td>35</td><td>35</td><td>35</td><td>35</td><td>35</td><td>35</td></tr><tr class="vrow"><td>36</td><td>36</td><td>36</td><td>36</td><td>36</td><td>36</td><td>36</td><td>36</td><td>36</td><td>36</td><td>36</td></tr><tr class="vrow"><td>37</td><td>37</td><td>37</td><td>37</td><td>37</td><td>37</td><td>37</td><td>37</td><td>37</td><td>37</td><td>37</td></tr><tr class="vrow"><td>38</td><td>38</td><td>38</td><td>38</td><td>38</td><td>38</td><td>38</td><td>38</td><td>38</td><td>38</td><td>38</td></tr><tr class="vrow"><td>39</td><td>39</td><td>39</td><td>39</td><td>39</td><td>39</td><td>39</td><td>39</td><td>39</td><td>39</td><td>39</td></tr><tr class="vrow"><td>40</td><td>40</td><td>40</td><td>40</td><td>40</td><td>40</td><td>40</td><td>40</td><td>40</td><td>40</td><td>40</td></tr><tr class="vrow"><td>41</td><td>41</td><td>41</td><td>41</td><td>41</td><td>41</td><td>41</td><td>41</td><td>41</td><td>41</td><td>41</td></tr><tr class="vrow"><td>42</td><td>42</td><td>42</td><td>42</td><td>42</td><td>42</td><td>42</td><td>42</td><td>42</td><td>42</td><td>42</td></tr><tr class="vrow"><td>43</td><td>43</td><td>43</td><td>43</td><td>43</td><td>43</td><td>43</td><td>43</td><td>43</td><td>43</td><td>43</td></tr><tr class="vrow"><td>44</td><td>44</td><td>44</td><td>44</td><td>44</td><td>44</td><td>44</td><td>44</td><td>44</td><td>44</td><td>44</td></tr><tr class="vrow"><td>45</td><td>45</td><td>45</td><td>45</td><td>45</td><td>45</td><td>45</td><td>45</td><td>45</td><td>45</td><td>45</td></tr><tr class="vrow"><td>46</td><td>46</td><td>46</td><td>46</td><td>46</td><td>46</td><td>46</td><td>46</td><td>46</td><td>46</td><td>46</td></tr><tr class="vrow"><td>47</td><td>47</td><td>47</td><td>47</td><td>47</td><td>47</td><td>47</td><td>47</td><td>47</td><td>47</td><td>47</td></tr></table><div class="scroller_cls" style="height: 3330px;"></div></div>
答案 0 :(得分：0)
我发现了一些解决方法来解决我的问题。我每行使用top。因为我通过JavaScript动态插入数据所以它对我有用。
以下是jsfiddle
的链接
below line solve my problem.
VirtualList.prototype._renderChunkOnScroll = function(node, from) {
var finalItem = from + this.cachedItemsLen;
var tempIntVar = 0;
if (finalItem > this.totalRows)
finalItem = this.totalRows;
var tempArr = [];
for(var i=from ;i<finalItem;i++){
tempArr.push(arrayObj[i]);
document.getElementsByClassName("container")[0].childNodes[1].childNodes[tempIntVar++].style.top = (i * this.itemHeight) + 'px';
}
for(var myvar=0; myvar <tempArr.length;myvar++){
var singleRow = tempArr[myvar];
for(var i= 0;i<singleRow.length;i++){
document.getElementsByClassName("container")[0].childNodes[1].childNodes[myvar].childNodes[i].innerHTML = singleRow[i];
}
}
};table, th, td {
border: 1px solid black;
white-space:nowrap;
padding-left:5px;
table-layout:fixed;
width: 100%;
padding-right:5px;
}
.vrow{
display:table;
position:absolute;
table-layout: fixed;
width:100%;
left: 1px;
}
.vrow td{
width: 50px;
}
.fixed-header th{
width: 50px;
}
div.main-table {
overflow:auto;
width:200px;
height:300px;
table-layout:fixed;
}
div.fixed-header-table {
position:relative;
}
div.fixed-header-wrapper {
overflow:hidden;
/* width: 999999999999999999px; */
}
/* style for two seprate div */
#sidebar {
width: 50%;
min-height: 400px;
background: #EFF0F1;
float: left;
}
#main{
width: 500px;
overflow: hidden;
}
#page-wrap {
width: 50%;
background: #FFFFCC;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
#outerDiv{
width: 500px;
overflow: hidden;
position: relative;
}
.container{
overflow-y: auto;
max-height: 300px;
}<div class="container" id="main_btl_container" style="width: 500px; height: 360px; overflow: auto; position: relative; padding: 0px; border: 1px solid black;">
<div style="opacity: 0; position: absolute; top: 0px; left: 0px; width: 1px; height: 99990px;"></div>
<table id="table-body">
<tr class="vrow" style="width: 100%; top: 0px;">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="vrow" style="width: 100%; top: 30px;">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="vrow" style="width: 100%; top: 60px;">
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="vrow" style="width: 100%; top: 90px;">
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="vrow" style="width: 100%; top: 120px;">
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="vrow" style="width: 100%; top: 150px;">
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr class="vrow" style="width: 100%; top: 180px;">
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr class="vrow" style="width: 100%; top: 210px;">
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
<td>7</td>
</tr>
<tr class="vrow" style="width: 100%; top: 240px;">
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr class="vrow" style="width: 100%; top: 270px;">
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
<tr class="vrow" style="width: 100%; top: 300px;">
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr class="vrow" style="width: 100%; top: 330px;">
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr class="vrow" style="width: 100%; top: 360px;">
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr class="vrow" style="width: 100%; top: 390px;">
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="vrow" style="width: 100%; top: 420px;">
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
<td>14</td>
</tr>
<tr class="vrow" style="width: 100%; top: 450px;">
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
</tr>
<tr class="vrow" style="width: 100%; top: 480px;">
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
<td>16</td>
</tr>
<tr class="vrow" style="width: 100%; top: 510px;">
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
<td>17</td>
</tr>
<tr class="vrow" style="width: 100%; top: 540px;">
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>18</td>
</tr>
<tr class="vrow" style="width: 100%; top: 570px;">
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
<td>19</td>
</tr>
<tr class="vrow" style="width: 100%; top: 600px;">
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
</tr>
<tr class="vrow" style="width: 100%; top: 630px;">
<td>21</td>
<td>21</td>
<td>21</td>
<td>21</td>
<td>21</td>
<td>21</td>
<td>21</td>
<td>21</td>
<td>21</td>
<td>21</td>
<td>21</td>
</tr>
<tr class="vrow" style="width: 100%; top: 660px;">
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
<td>22</td>
</tr>
<tr class="vrow" style="width: 100%; top: 690px;">
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
<td>23</td>
</tr>
<tr class="vrow" style="width: 100%; top: 720px;">
<td>24</td>
<td>24</td>
<td>24</td>
<td>24</td>
<td>24</td>
<td>24</td>
<td>24</td>
<td>24</td>
<td>24</td>
<td>24</td>
<td>24</td>
</tr>
<tr class="vrow" style="width: 100%; top: 750px;">
<td>25</td>
<td>25</td>
<td>25</td>
<td>25</td>
<td>25</td>
<td>25</td>
<td>25</td>
<td>25</td>
<td>25</td>
<td>25</td>
<td>25</td>
</tr>
<tr class="vrow" style="width: 100%; top: 780px;">
<td>26</td>
<td>26</td>
<td>26</td>
<td>26</td>
<td>26</td>
<td>26</td>
<td>26</td>
<td>26</td>
<td>26</td>
<td>26</td>
<td>26</td>
</tr>
<tr class="vrow" style="width: 100%; top: 810px;">
<td>27</td>
<td>27</td>
<td>27</td>
<td>27</td>
<td>27</td>
<td>27</td>
<td>27</td>
<td>27</td>
<td>27</td>
<td>27</td>
<td>27</td>
</tr>
<tr class="vrow" style="width: 100%; top: 840px;">
<td>28</td>
<td>28</td>
<td>28</td>
<td>28</td>
<td>28</td>
<td>28</td>
<td>28</td>
<td>28</td>
<td>28</td>
<td>28</td>
<td>28</td>
</tr>
<tr class="vrow" style="width: 100%; top: 870px;">
<td>29</td>
<td>29</td>
<td>29</td>
<td>29</td>
<td>29</td>
<td>29</td>
<td>29</td>
<td>29</td>
<td>29</td>
<td>29</td>
<td>29</td>
</tr>
<tr class="vrow" style="width: 100%; top: 900px;">
<td>30</td>
<td>30</td>
<td>30</td>
<td>30</td>
<td>30</td>
<td>30</td>
<td>30</td>
<td>30</td>
<td>30</td>
<td>30</td>
<td>30</td>
</tr>
<tr class="vrow" style="width: 100%; top: 930px;">
<td>31</td>
<td>31</td>
<td>31</td>
<td>31</td>
<td>31</td>
<td>31</td>
<td>31</td>
<td>31</td>
<td>31</td>
<td>31</td>
<td>31</td>
</tr>
<tr class="vrow" style="width: 100%; top: 960px;">
<td>32</td>
<td>32</td>
<td>32</td>
<td>32</td>
<td>32</td>
<td>32</td>
<td>32</td>
<td>32</td>
<td>32</td>
<td>32</td>
<td>32</td>
</tr>
<tr class="vrow" style="width: 100%; top: 990px;">
<td>33</td>
<td>33</td>
<td>33</td>
<td>33</td>
<td>33</td>
<td>33</td>
<td>33</td>
<td>33</td>
<td>33</td>
<td>33</td>
<td>33</td>
</tr>
<tr class="vrow" style="width: 100%; top: 1020px;">
<td>34</td>
<td>34</td>
<td>34</td>
<td>34</td>
<td>34</td>
<td>34</td>
<td>34</td>
<td>34</td>
<td>34</td>
<td>34</td>
<td>34</td>
</tr>
<tr class="vrow" style="width: 100%; top: 1050px;">
<td>35</td>
<td>35</td>
<td>35</td>
<td>35</td>
<td>35</td>
<td>35</td>
<td>35</td>
<td>35</td>
<td>35</td>
<td>35</td>
<td>35</td>
</tr>
</table>
</div>