scroll div based on another div.

Question

User-590375999 posted

Hi,

<div class="div1"><div>

<div class="div2"></div>

1. I need to scroll div1 horizontally , when div2 scroll horizontally by user.
2. I need to disable direct scroll for div1 by user

I have tried scrollLeft but sctollar Length is not same for div1 and div2 , so div1 not scroll to end.

$('.div2').on('scroll', function(e) {
    $(".div1").scrollLeft($(this).scrollLeft());
});

Answer 1

User288213138 posted

Hi sivapooja,

• I need to scroll div1 horizontally , when div2 scroll horizontally by user.
• I need to disable direct scroll for div1 by user

You can try this code:

<style>
        .divScrollDiv {
            display: inline-block;
            width: 10%;
            border: 1px solid black;
            height: 100px;
            overflow: scroll;
        }    
    </style>

  <script>
        $(document).ready(function () {
            var target = $("#source");
            $("#target").scroll(function () {
                target.prop("scrollTop", this.scrollTop)
                    .prop("scrollLeft", this.scrollLeft);
            });
        });
    </script>

<div id="source" class="divScrollDiv" style="overflow: hidden;">
        1
        <br>2
        <br>3
        <br>4
        <br>5
        <br>6
        <br>7
        <br>8
        <br>9
        <br>10
        <br>11
        <br>12
        <br>13
        <br>14
        <br>15
        <br>16
        <br>17
        <br>18
        <br>19
        <br>20
    </div>
    <div id="target" class="divScrollDiv">
        1
        <br>2
        <br>3
        <br>4
        <br>5
        <br>6
        <br>7
        <br>8
        <br>9
        <br>10
        <br>11
        <br>12
        <br>13
        <br>14
        <br>15
        <br>16
        <br>17
        <br>18
        <br>19
        <br>20
    </div>

The result:

Best regards,

Sam

Answer 2

User-590375999 posted

Hi I was looking for horizontal scroll, i already found the solution.

i was clone table header into div1 , and hide table heder in div2 , so user can scroll vertically and horizontally 

Answer 3

User288213138 posted

Hi sivapooja,

sivapooja

Hi I was looking for horizontal scroll, i already found the solution.

i was clone table header into div1 , and hide table heder in div2 , so user can scroll vertically and horizontally 

Sorry for not being able to see your question clearly, but jquery can still work, you only need to change the vertical to horizontal.

<style>
        .divScrollDiv {
            display: inline-block;
            width: 10%;
            border: 1px solid black;
            height: 100px;
            overflow: scroll;
        }

        .tableNoScroll {
            overflow: hidden;
        }
    </style>
    <script>
        $(document).ready(function () {
            var target = $("#tableFixed");
            $("#tableLista").scroll(function () {
                target.prop("scrollTop", this.scrollTop)
                    .prop("scrollLeft", this.scrollLeft);
            });
        });
    </script>

<div id="tableFixed" class="divScrollDiv tableNoScroll">
        <table>
        <tbody>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
                <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
            </tr>
           
        </tbody>
    </table>
    </div>
    
    <div id="tableLista" class="divScrollDiv">
        <table>
        <tbody>
            <tr>
                <td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td>
                <td>k</td><td>l</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td><td>r</td><td>s</td><td>t</td>
            </tr>
            <tr>
                <td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td>
                <td>k</td><td>l</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td><td>r</td><td>s</td><td>t</td>
            </tr>
            <tr>
                <td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td>
                <td>k</td><td>l</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td><td>r</td><td>s</td><td>t</td>
            </tr> 
        </tbody>
    </table>
    </div>

The result:

Best regards,

Sam