javascript - 不滚动子元素滚动div

标签 javascript html css

jsfiddleLink

我想要 div 的滚动条，但我不希望它在滚动时更改其子位置。

让我描述一下我的完整问题:

有一个div。在 div 中有一个 table。在滚动 div 时，我正在使用 JavaScript 向表格行中填充新数据。这是数据如何使用滚动高度填充表格的单独逻辑。问题是由于滚动 div 内的表格也会移动。

我尝试过对 table 使用 position:fixed 和 position:absolute。但这也行不通。

任何想法或变通方法都会有所帮助。

提前致谢。

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>

最佳答案

我找到了一些解决方法来解决我的问题。我为每一行使用了顶部。因为我通过 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>

关于javascript - 不滚动子元素滚动div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38220265/

上一篇：css - 在 CSS 中根据方向设置字体

下一篇：javascript - jQuery 多项选择不起作用

相关文章：

html - :hover? 上闪烁的 svg 组

css - 如何使边距适用于 span 元素？

html - 收据打印

html - 将子div扩展到父级的高度？

javascript - 管理图像 map ，管理与区域 map 的交互

html - 背景颜色在包装器中不起作用

javascript - 处理背景YouTube视频不与tubular.js一起播放

javascript - X-Frame-Options 错误

java - 按需复制 Google 电子表格

javascript - 如何使用 jquery 文本框中提供的输入来选择价格范围？

©2024 IT工具网  联系我们