8

の上下の水平スクロールバーを表示しようとしていますdiv。私はこのSOの質問を見つけ、それに応じてページコードを変更しました。

HTML / Razor

<div class="wmd-view-topscroll">
    <div class="scroll-div">
    </div>
</div>
<div class="wmd-view">
    @Html.Markdown(Model.Contents)
</div>

CSS

.wmd-view-topscroll, .wmd-view
{
    overflow-x: scroll;
    overflow-y: hidden;
    width: 1000px;
}

.scroll-div
{
    width: 1000px;
}

Javascript

<script type="text/javascript">
$(function(){
    $(".wmd-view-topscroll").scroll(function(){
        $(".wmd-view")
            .scrollLeft($(".wmd-view-topscroll").scrollLeft());
    });
    $(".wmd-view").scroll(function(){
        $(".wmd-view-topscroll")
            .scrollLeft($(".wmd-view").scrollLeft());
    });
});
</script>

これにより、下部のスクロールバーが通常どおり表示されますが、上部のスクロールバーが無効になっています。ここで何が欠けていますか？

前もって感謝します

アップデート

javascriptを削除しても、出力は同じです。Javaスクリプトコードが実行されていないようですが、JavaScriptエラーはリストされていません。

4

2 に答える 2

12

以下に示すように、HTMLとCSSを微調整することで実現できます。

HTMLは次のようになります。

<div class="wmd-view-topscroll">
    <div class="scroll-div1">
    </div>
</div>
<div class="wmd-view">
    <div class="scroll-div2">
        @Html.Markdown(Model.Contents)  
    </div>
</div>

CSSは次のようになります。

wmd-view-topscroll, .wmd-view {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 300px;
    border: none 0px RED;
}

.wmd-view-topscroll { height: 20px; }
.wmd-view { height: 200px; }
.scroll-div1 { 
    width: 1000px; 
    overflow-x: scroll;
    overflow-y: hidden;
}

.scroll-div2 { 
    width: 1000px; 
    height:20px;
}

デモを見る

于 2012-08-01T08:35:34.640 に答える
4

ついにこのコードでそれを修正することができました...

HTML

<div class="wmd-view-topscroll">
    <div class="scroll-div">
        &nbsp;
    </div>
</div>
<div class="wmd-view">
    <div class="dynamic-div">
        @Html.Markdown(Model.Contents)
    </div>
</div>

CSS

.wmd-view-topscroll, .wmd-view
{
    overflow-x: auto;
    overflow-y: hidden;
    width: 1000px;
}

.wmd-view-topscroll
{
    height: 16px;
}

.dynamic-div
{
    display: inline-block;
}

Javascript / JQuery

<script type="text/javascript">
    $(function () {

        $(".wmd-view-topscroll").scroll(function () {
            $(".wmd-view")
            .scrollLeft($(".wmd-view-topscroll").scrollLeft());
        });

        $(".wmd-view").scroll(function () {
            $(".wmd-view-topscroll")
            .scrollLeft($(".wmd-view").scrollLeft());
        });

    });

    $(window).load(function () {
        $('.scroll-div').css('width', $('.dynamic-div').outerWidth() );
    });
</script>

答えてくれてありがとう...それは私が内部の働きを理解するのに本当に役立ちました。:)

于 2012-08-03T05:32:19.807 に答える