0

上部にあるときに上ボタンを非表示にし、下部にあるときに下ボタンを非表示にしたい垂直スクロールがあります。Jqueryでこれを行う方法があるに違いないことは知っていますが、うまく機能させることができません。http://jsfiddle.net/afnguyen/wjALk/をご覧ください

または以下はコードです：

HTML:

 <div class="twobytwostandard">
                <div id="up">
                    up</div>
                <div class="twobytwostandardmiddle">
                    <ul>
                        <li>
                            <div class="w6392597">
                                <a id="/81/177/6566/6acdca3a97bc4a8cb36ff28bee65bcf0" class="retailerlogo t6392597"
                                    href="http://www.ocado.com/webshop/product/Dove-For-Men-Clean-Comfort-Deodorant-Stick/54639011?prevPageIndex=1&amp;from=search&amp;tags=%7C20000&amp;param=Comfort&amp;parentContainer=SEARCHComfort_SHELFVIEW"
                                    title="" target="_blank">
                                    <img src="http://static.e-talemedia.net/content/images/logos/ocado121x42.png" alt="" />
                                </a>
                                <img style="float: left;" src="http://static.e-talemedia.net/content/images/pixel1.png"
                                    height="1" width="1" border="0" alt="" />
                                <a id="/81/177/6566/b2e91de1815045469d95e96f3abee719" class="retailerlogo t6392597"
                                    href="http://www.ocado.com/webshop/product/Dove-For-Men-Clean-Comfort-Deodorant-Stick/54639011?prevPageIndex=1&amp;from=search&amp;tags=%7C20000&amp;param=Comfort&amp;parentContainer=SEARCHComfort_SHELFVIEW"
                                    title="" target="_blank">
                                    <img class="buynow" src="http://static.e-talemedia.net/content/images/dovebellinibuynowbutton.png"
                                        alt="" />
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="w6392597">
                                <a id="/80/177/6566/8a1c11fba50449d7ac13d5aec2a88e3a" class="retailerlogo t6392597"
                                    href="http://www.superdrug.com/deodorants/dove-men-care-stick-clean-comfort-50ml/invt/203346/"
                                    title="" target="_blank">
                                    <img src="http://static.e-talemedia.net/content/images/logos/superdrug121x42.png"
                                        alt="" />
                                </a>
                                <img style="float: left;" src="http://static.e-talemedia.net/content/images/pixel1.png"
                                    height="1" width="1" border="0" alt="" />
                                <a id="/80/177/6566/4c151c561c1b4ca582ff627c803ced63" class="retailerlogo t6392597"
                                    href="http://www.superdrug.com/deodorants/dove-men-care-stick-clean-comfort-50ml/invt/203346/"
                                    title="" target="_blank">
                                    <img class="buynow" src="http://static.e-talemedia.net/content/images/dovebellinibuynowbutton.png"
                                        alt="" />
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="w6392597">
                                <a id="/45/177/6566/6ca503308f9c44029a2e0b78cdbd4662" class="retailerlogo t6392597"
                                    href="http://www.awin1.com/cread.php?awinmid=2041&awinaffid=108052&clickref=50220021&p=http%3A%2F%2Fwww.boots.com%2Fen%2FDove-Men-Care-Clean-Comfort-24h-Antiperspirant-Deodorant-Stick-50ml_1041885%2F"
                                    title="" target="_blank">
                                    <img src="http://static.e-talemedia.net/content/images/logos/boots121x42.png" alt="" />
                                </a>
                                <img style="float: left;" src="http://static.e-talemedia.net/content/images/pixel1.png"
                                    height="1" width="1" border="0" alt="" />
                                <a id="/45/177/6566/e59a23e507f14369acb3989e46113327" class="retailerlogo t6392597"
                                    href="http://www.awin1.com/cread.php?awinmid=2041&awinaffid=108052&clickref=50220021&p=http%3A%2F%2Fwww.boots.com%2Fen%2FDove-Men-Care-Clean-Comfort-24h-Antiperspirant-Deodorant-Stick-50ml_1041885%2F"
                                    title="" target="_blank">
                                    <img class="buynow" src="http://static.e-talemedia.net/content/images/dovebellinibuynowbutton.png"
                                        alt="" />
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="w6392597">
                                <img class="retailerlogo1" src="http://static.e-talemedia.net/content/images/logos/tesco121x42fadedcolour.png"
                                    alt="This retailer is currently out of stock, please choose from another retailer" />
                            </div>
                        </li>
                    </ul>
                </div>
                <div id="down">
                    down</div>
            </div>

CSS:

 .twobytwostandardmiddle
        {
            height: 278px;
            width: 201px;
            border: 1px solid #000;
            overflow: hidden;
        }
        .w6392597
        {
            width: 300px;
            height: 48px;
            border: 1px solid #FF0000;
        }
        #up
        {
            width: 30px;
            height: 20px;
            background-color: #006600;
            cursor: pointer;
        }
        #down
        {
            width: 40px;
            height: 20px;
            background-color: #006600;
            cursor: pointer;
        }  

/* reset */
        *
        {
            margin: -1px;
            padding: 0;
        }
        img
        {
            border: none !important;
            margin: 0px !important;
        }

        h1
        {
            font-family: arial;
            font-weight: bold;
            font-size: 24px;
            color: #333;
        }
        .retailerlogo
        {
            float: left;
            padding-left: 0px;
            padding-right: 0px;
            padding-bottom: 5px;
            margin-left: 7px;
        }
        .retailerlogo1
        {
            float: left;
            padding-left: 7px;
            padding-right: 0px;
            padding-bottom: 5px;
            margin-left: 5px;
        }
        .buynow
        {
            float: left;
            padding-top: 8px;
        }
        .twobytwostandardmiddle
        {
            background-color: yellow;
            height: 278px;
            width: 201px;
        }
        body
        {
            width: 376px;
            background-color: transparent;
        }
        .page
        {
            width: 376px;
            background-color: transparent;
        }
        #main
        {
            width: 376px;
            background-color: transparent;
        }
        .twobytwostandard
        {
            width: 376px;
            height: 376px;

        }
        .twobytwostandard ul
        {
            float: left;
            list-style: none;
            margin: 0px 0px 0px 0px;
            line-height: 100%;
            background-color: transparent;
            padding-top: 33px;
        }
        .twobytwostandard li
        {
            float: left;
            height: 126px;
            margin: -15px -47px 20px 8px;
        }
        .w6392597
        {
            background: none repeat scroll 0 0 transparent;
            float: left;
            height: 104px;
            margin: 2px 23px 20px 22px;
            overflow: hidden;
            padding: 10px 3px 0;
            width: 136px;
        }

JQuery:

$(document).ready(function () {

            $(document).on("click", "#down", function () {
                var scrollval = $('.w6392597').height();
                var currentscrollval = $('.twobytwostandardmiddle').scrollTop();

                $('.twobytwostandardmiddle').scrollTop(scrollval + currentscrollval);

            });
            $(document).on("click", "#up", function () {
                var scrollval = $('.w6392597').height();
                var currentscrollval = parseInt($('.twobytwostandardmiddle').scrollTop());

                $('.twobytwostandardmiddle').scrollTop(currentscrollval - scrollval);
            });
        });

ありがとう！

4

1 に答える 1

0

jQueryを使用した次の垂直スクロールのおかげで、動作するように私のものを適応させることができました:

http://jsfiddle.net/afnguyen/wjALk/3/

JQuery:

$(document).ready(function(){
       $("#up").hide();
    // get the number of .child elements
    var totalitems = $(".twobytwostandardmiddle .w6392597").length;
    // get the height of .w6392597
    var scrollval = $('.w6392597').height();
    // work out the total height.
    var totalheight = (totalitems*scrollval)-($(".twobytwostandardmiddle").height());

    $(document).on("click", "#down",function(){
        var currentscrollval = $('.twobytwostandardmiddle').scrollTop();

        $('.twobytwostandardmiddle').scrollTop(scrollval+currentscrollval);

        // hide/show buttons
        if(currentscrollval == totalheight) {
            $(this).hide();         
         }
         else {
             $("#up").show();
         }
    });
     $(document).on("click", "#up",function(){
         var currentscrollval = parseInt($('.twobytwostandardmiddle').scrollTop());

        $('.twobytwostandardmiddle').scrollTop(currentscrollval-scrollval);

         // hide/show buttons
         if((scrollval+currentscrollval) == scrollval) {
            $(this).hide();         
         }
         else {
             $("#down").show();
         }
    });
});
于 2013-05-08T10:27:42.487 に答える