Devender Kumar Devender Kumar - 4 months ago 8
HTML Question

Scroll div without scrolling child element

jsfiddleLink

I want scroller for the

div
but i don't want its to change its child location on scroll.




Let me describe my complete problem:

There is a
div
. inside the
div
there is a
table
. On scroll of
div
i am filling new data in the table rows with JavaScript. That is separate logic how the data is getting fill in the table with the scroll height. The problem is that due to scroll the table inside div also move.

I have tried using
position:fixed
and
position:absolute
for
table
. But that also does not work.

Any idea or work around would be helpful.

Thanks in advance.



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>




Answer

I find out some workaround for my problem. I used top for each row. As i am inserting data dynamically through so it work for me.

Here is the link of jsfiddle

below line solve my problem.
document.getElementsByClassName("container")[0].childNodes[1].childNodes[tempIntVar++].style.top = (i * this.itemHeight) + 'px';
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>