브라우저 제목

//스크롤 왼쪽으로 이동
    var moveLeft=0;
    $(".top-menu").hover(
        function(){
            $("html,body").css({
                "overflow-y":"hidden",
//                "-ms-overflow-style":"none",
//                "scrollbar-width":"none"
            });
            $("html::-webkit-scrollbar,body::-webkit-scrollbar").css({
                display:"none"
            })
            $(".top-menu").on("mousewheel",function(e){
        
            var wheelDelta=e.originalEvent.wheelDelta;
            if(wheelDelta>0){
                console.log("up");
                moveLeft=-wheelDelta+$(this).scrollLeft();
//                $(this).scrollLeft(-wheelDelta+$(this).scrollLeft());

            }else{
                console.log("down");
                moveLeft=-wheelDelta+$(this).scrollLeft();
//                $(this).scrollLeft(-wheelDelta+$(this).scrollLeft());

            }
                $(this).stop().animate({
                    scrollLeft:moveLeft
                });
        })
        },
        function(){
            $("html,body").css({
                overflow:"auto"
            });
        }
    );

 

섹션마다 왼쪽으로 이동

 

$(function(){
    var sWidth=$(".wrap").width();
    var sLength=$(".section").length;
    $(".section-wrap").css({
        width:sWidth*sLength
    });
    $(".section").css({
        width:sWidth,
        float:"left"
    });
    var last=0;
    var indexP
    var moveLeft=0;
    var sectionWidth=0;
    function wheel(){
        var winWidth=$(window).width();
        $(".section").css({
            width:winWidth
        });
        $(".section-wrap").css({
            width:winWidth*sLength
        });
        $(".section").each(function(index){
            
                $(this).on('DOMMouseScroll mousewheel', function(e){
                    if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                        console.log("올렸어요");
                        if($(this).prev()!=undefined){
                            moveLeft=$(this).prev().offset().left;
                            indexP=index-1;
                        }
                    }else{
                        console.log("내렸어요")
                        if($(this).next()!=undefined){
                            moveLeft=$(this).next().offset().left;
                            indexP=index+1;
                        }
                    }

                    $("html,body").stop().animate({
                        scrollLeft:moveLeft
                    },500);

                    $(window).resize(function(){
                        var sectionWidth=$(window).width();
                        
                        $("html,body").stop().animate({
                           scrollLeft:sectionWidth*indexP 
                        },0);


                    });
                });
            
           
            
        });
    }
    
    wheel();
    
    $(window).resize(function(){
        wheel();
        
    });
        
    
   
});

        
    
   
});

제목 날짜
포트폴리오 샘플 2020.05.21
데스크탑, 모바일 구분 접속 2019.02.11
터치이벤트, pc환경과 모바일 환경 알아내기 file 2020.05.04
코르도바 를 설정하기 위한 방법 file 2020.04.26
sticky position file 2020.04.22
webfont file 2020.04.21
video file 2020.04.15
audio2 file 2020.04.15
audio 2020.04.11
wheel이벤트3 file 2020.04.11
wheel이벤트2 file 2020.04.11
wheel이벤트1 file 2020.04.11
드레그 앤 드롭 효과 예제 file 2020.04.03
드레그 앤 드롭 효과 원리 file 2020.04.03
슬라이드 페이지 네이션 file 2020.04.02
좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file 2020.04.02
모바일 작업 file 2020.04.02
자격증 슬라이드 기본 2020.03.30
스크롤바 없에는 css 2020.03.30
터지이벤트와 mouseup, mousedown이벤트 2020.03.28
태그 목록