무한스크롤링 현상 좀 도와주세요 ㅠㅠ > 십년전오늘

십년전오늘

10년전 추억의 책장을 넘기며

무한스크롤링 현상 좀 도와주세요 ㅠㅠ 정보

무한스크롤링 현상 좀 도와주세요 ㅠㅠ

본문

죽겠습니다 -_-;;

정말답답합니다.

이거 지금 테이블 구조를 변경 할 수는 없는상황이구요..ㅜㅜ


주소는 http://anappletree.com/Front/Product/?url=Category&cate_no=ANAC0000 

인데,
브라우져 크기가 크면괜찮은데

해상도 관련으로 작아지거나

우측 퀵메뉴 크기가 커지면 여지없이 무한스크롤되네요

재미있는점은 크기를 줄이면 우측으로도 무한스크롤 된다는거.


대충 브라우져 크기등 계산해서 어느정도 오면 스크롤링 중지

라는 원리는 알겠는데 어떻게 해야될지를 모르겠네요.

주소에 자바 소스도 포함되어있습니다.





부탁드립니다 간절하네요
-----------



<script>

    var StickerAnimation = function(){};
    StickerAnimation.prototype = {
        duration : null,
        obj : null,
        from : null,
        to : null,
        timer : 0,
        step : 0,
        start : function(obj, from, to, duration, type){
            var self = this;
            this.obj = obj;
            this.from = from;
            this.to = to;
            this.now = new Date;
            this.duration = duration || 1000;
            this._delta = this['_delta' +(type || 'Elastic')];

            if(this.timer)
                this.stop();

            this.timer = setInterval(function(){self.run();}, 10);
        },
        run : function(){

            var time = ((new Date) - this.now) / this.duration;
            var delta = this._delta(time);

            var step = Math.pow(2, this.step);
            var dep_x = (this.to.x - this.from.x) * delta;
            var dep_y = (this.to.y - this.from.y) * delta;

            if(time > 1){
                this.stop();
                this.end();
            }else{

                this.obj.style.marginLeft = this.from.x + dep_x + "px";
                this.obj.style.marginTop = this.from.y + dep_y + "px";
            }
        },
        end : function(){
            this.obj.style.marginLeft = (this.to.x) + "px";
            this.obj.style.marginTop = (this.to.y) + "px";
        },
        stop : function(){
            clearInterval(this.timer);
            this.timer = 0;
        },

        _deltaBounce : function(pos){
            var p = 1 - pos;

            var value;
            for (var a = 0, b = 1; 1; a += b, b /= 2){
                if (p >= (7 - 4 * a) / 11){
                    value = - Math.pow((11 - 6 * a - 11 * p) / 4, 2) + b * b;
                    break;
                }
            }
            return 1 - value;
        },

        _deltaExpo : function(pos){
            var p = 1 - pos;
            return 1 - Math.pow(2, 8 * (p - 1));
        },

        _deltaElastic : function(pos){
            var p = 1 - pos;
            return 1 - Math.pow(2, 10 * --p) * Math.cos(20 * p * Math.PI * 1 / 3);
        },

        _deltaStatic : function(pos){
            return 1;
        }

    }

    var StickerManager = {
        init : false,
        stickers : [],
        opts : [],
        add : function(id, duration, type){

            if(!this.init){
                var self = this;
                var init_event = function(){self.oninit();};
                var scroll_event = function(){self.onscroll();};

                if(window.attachEvent){
                    window.attachEvent('onload', init_event);
                    window.attachEvent('onscroll', scroll_event);
                }else{
                    window.addEventListener('load', init_event, false);
                    document.addEventListener('scroll', scroll_event, false);
                }

                this.init = true;
            }

            this.stickers.push(id);
            this.opts.push({duration:duration,type:type});
        },

        oninit : function(){
            var sticker;
            for(var x = 0, len = this.stickers.length; x < len; x++){
                sticker = document.getElementById(this.stickers[x]);
                if(!sticker){
                    alert(this.stickers[x] + ' is bad id.');
                    this.stickers[x] = null;
                    continue;
                }
                this.stickers[x] = sticker;
                sticker.style.marginLeft = sticker.style.marginTop = "0px";
            }
        },

        onscroll : function(){
            var left = parseInt(document.body.scrollLeft);
            var top = parseInt(document.body.scrollTop);
            var sticker;
            for(var x = 0, len = this.stickers.length; x < len; x++){
                sticker = this.stickers[x];

                if(!sticker)
                    continue;

                if(!sticker.animation){
                    sticker.animation = new StickerAnimation();
                }else{
                    sticker.animation.stop();
                }
                
                sticker.animation.start(
                    sticker,
                    {x:parseInt(sticker.style.marginLeft), y:parseInt(sticker.style.marginTop)},
                    {x:left, y:top},
                    this.opts[x].duration,
                    this.opts[x].type
                );

            }
        }
    }

</script>


마지막부분에
<script>StickerManager.add("divMenu",1000,"Expo");</script>
가 들어가있습니다
부탁드릴게요 ㅠㅠ

  • 복사

댓글 전체

홈페이지 오른쪽에 스크롤바 옆에 따라다니는 것 그거 때문에 그런겁니다.
그걸 빼 보시거나 아니면 Y값을 좀더 낮게 줘서 좀더 상단에 배치 해 보세요.
따라다니는걸 없앨수는 없는상황이고, 사실 줏어온 자바스크립트 소스에 대한 이해가 부족해서 내려오는 부분에 대해 어디다 어떻게 넣어야할지를모르겠습니다..ㅠㅠ
divMenu 라는 퀵메뉴를 삽입하는 곳에

<div style="position:absolute; top:0px; left:0px;">
<div id="divMenu">
<table border="0" cellspacing="0" cellpadding="0" width="59" height="210">
<tr>
<td colspan="3"><img src="http://file.anappletree.cafe24.com/images/quick_01.gif"></td>
</tr>
<tr>
<td colspan="3"><a href="javascript:window.external.addfavorite('http://anappletree.com/', '♥♡a p p l e t r e e * s H o p♥♡');" ><img border=0 src="http://file.anappletree.cafe24.com/images/quick_02.gif"></a></td>
</tr>
<tr>
<td colspan="3"><img src="http://file.anappletree.cafe24.com/images/quick_03.gif"></td>
</tr>
<tr>
<td width="11" background="http://file.anappletree.cafe24.com/images/quick_04.gif"></td>
<td></td>
<td width="9" background="http://file.anappletree.cafe24.com/images/quick_06.gif"></td>
</tr>
<tr>
<td colspan="3"><img src="http://file.anappletree.cafe24.com/images/quick_07.gif"></td>
</tr>
</table>
</div>
</div>

을 넣어주세요.

즉, divMenu 를 <div style="position:absolute; top:0px; left:0px;"> ........ </div> 로 감싸주세요.
자바스크립트로 하시면 상당히 어려우실꺼예요 포탈에서도 잡아논 사이트 거의 보질 못햇어요.
그냥 부드럽지는않지만 css로 처리하시면 그런 문제는 신경안쓰셔도되는데
© SIRSOFT
현재 페이지 제일 처음으로