javascript - 固定された列を持ち、もう一方は順序付けられていないリスト内でスクロール可能です

Question

大きな幅の div を作成する TabbedContent スクリプトを使用しています。この div にはいくつかの順序付けられていないリストがあり、各リストはタブに対応しています。次に、スクリプトは大きな div の幅を調整して、リストがコンテンツを表示している領域に収まるようにします。

現在、スクロールが機能しなくなるため、固定divまたは絶対divを設定できません。私が必要としているのは、右の列にテキストが含まれている間、左の列を固定する必要がある 2 列の設定です。両方ともリスト内にある必要があり、他のタブで複製できる必要があります。

タブシステムを実行するために使用している .js は次のとおりです。

    var TabbedContentSolutions = {
    init: function() {  
        $(".tab_thumb").click(function() {

            $(this).siblings().removeClass('active_thumb');
            $(this).addClass('active_thumb');

            var background = $(this).parent().find(".moving_bg2");

            $(background).stop().animate({
                left: $(this).position()['left']
            }, {
                duration: 0
            });

            TabbedContentSolutions.slideContent2($(this));

        });
    },

    slideContent2: function(obj) {

        var margin = $(obj).parent().parent().find(".slide_content2").width();
        margin = margin * ($(obj).prevAll().size() - 1);
        margin = margin * -1;

        $(obj).parent().parent().find(".tabslider2").stop().animate({
            marginLeft: margin + "px"
        }, {
            duration: 0
        });
    }
}


$(document).ready(function() {
    TabbedContentSolutions.init();
});

.js と div を制御する CSS は次のとおりです。

    .tabbed_content2 {
    background-color: ##F7931E;
    width: 1000px;

}

.tabbed_content2 .slide_content2 {
    overflow: hidden;
    position: relative;
    width: 1000px;
}

.tabs2{
    margin-top: 10px;
    margin-left: 10px;
    height: 32px;
    width: 670px;
    position: relative;
    float: right;
}

.tabs2 .tab_thumb{
    height: 32px;
    width: 32px;
    margin-left: 9px;
    float: left;
    cursor: pointer;
}

.tabslider2{
    width: 17000px;
    overflow-x: hidden;
}

.tabslider2 ul {
    float: left;
    width: 980px;
    height: 323px;
    margin: 0px;
    padding: 0px;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    overflow-x: hidden;
}

#_solutions{
    width: 980px;
    height: 300px;
    padding-left: 10px;
    padding-right: 10px;
}

.solutions_left{
    width: 273px;
    height: 330px;
    padding-right: 10px;
    float: left;
    }

.solutions_right{
    width: 670px;
    height: 100%;
    overflow: auto;
    float: left;
}

.tabslider2 ul li {
    padding-bottom: 4px;
    list-style-type: none;
}

.active_thumb{
    opacity: .10;
}

そして、これがタブを作成するために使用している基本的な div セットアップです。

  <div id="_Content">
            <div id="_solutionsWrap">
                <div class='tabs2'>
                    <div class='moving_bg2'>
                    </div>
                    <span id="solucoes" class='tab_thumb' style="display:none">
                        asdasdasd
                    </span>
                                <div id="_solutions">
                    <div class='tabbed_content2'>
                        <div class='slide_content2'>
                            <div class='tabslider2'>
                            <ul>
                                <li>
                    <div class="solutions_left">
                        <p></p>
                    </div>
                    <div class="solutions_right">
                    <h1>solutions</h1>
                    <p></p>

                    <p></p>
                    </div>

                    </li>
                    </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

わかりにくいかもしれませんが、少なくとも 17 個の異なるタブがあり、それぞれに画像を表示するための非スクロール レット バーが必要です。

絶対配置は機能しません。タブを切り替えようとするたびに、div は表示領域内に残ります。

Fixedには同じ問題があります。私はJavascriptをほとんどまたはまったく知らないため、この問題を解決する方法がわかりません。jQueryはなおさらです。