HTML

<div class="flex-content">
    <div class="sync_scroll_top" target="#mousewheel_example">
        <div></div>
    </div>

    <div id="mousewheel_example">
        <input type="hidden" name="type" value="<?=$vital_type;?>">
        <input type="hidden" id="pid" name="pid" value="<?=$patient_id;?>">
        <input type="hidden" name="__method" value="edit">

        <table id="itable" class="table">
            <?php 
            foreach ($layouts as $field_index => $layout): 
            ?>
            <tr style="height:inherit;">
                <th class="stick1">
                    <?=$this->upload_his_layout_m->get_title($layout)?>
                </th>

                <?php
                if($layout->id == 39){
                    $html = '<td class="data-column" data-column-id="0">';
                    $html .= '<button type="button" class="btn btn-success btn-xs action_button" id="manual_upload" tabindex="">上傳至HIS</button>';
                    $html .= '</td>';
                    echo $html;
                }else{
                    echo $this->upload_his_layout_m->display($layout, 0, 0);
                }
                ?>
            </tr>
            <?php endforeach; ?>
        </table>
    </div>
</div>

 

Javascript

var syncscroll_app = function(){
 
    function init(){
        var $sync = $(".sync_scroll_top");
        var $target = $($sync.attr('target'));
        $sync.scroll(function(){
            $target.scrollLeft($sync.scrollLeft());
        });

        $target.scroll(function(){
            $sync.scrollLeft($target.scrollLeft());
        });

        refresh_sync_scroll();
    }

    function refresh_sync_scroll(){
        var $sync = $(".sync_scroll_top");
        if($sync.length > 0){
            var $target = $($sync.attr('target'));
            var $table = $target.find('table');
            $sync.find('div').css('width', $table.width());
        }
    }

    return {
        init: init, 
        refresh: refresh_sync_scroll
    }
}();