inflearn logo
강의

Course
Instructor

Getting Started with Programming: Introduction to Web (Inflearn Original)

Creating Instagram Post Cards - JavaScript, Carousel (4-2)

화면 오른쪽 스크롤이 넘어가질 않아요!

516

taeyun1118

6 asked

0

<html>
  <head>
    <meta charset="utf-8">
    <title>인스타그램</title>
    <link rel = "stylesheet" href = "styles/card.css">
  </head>
  <body>
    <section class = "container">
      <article class = "card">
      	<header>
            <div class = "circle-image">
            	<img src = "images/profile.png"/>
            </div>
            <div class = "card-username">
                <span>taeyun_kwon1118</span>
            </div>
            <div class = "option-more">
                <button class = "transparent-button"><img src = "images/icons/mark.png"/></button>
            </div>
      	</header>
      	<main>
           <div class = "carousel" data = "0">
            <div>
              <ul>
                <li><img src = "images/mountain1.jpg"/>
                </li><li><img src = "images/mountain2.jpg"/>
                </li><li><img src = "images/mountain3.jpg"/>
                </li><li><img src = "images/mountain4.jpg"/></li>
              </ul>
              <div class = "slide slide-left">
                <button class = "transparent-button"><img src = "images/icons/arrow-left.png"/></button>
              </div>
              <div class = "slide slide-right">
                <button class = "transparent-button"><img src = "images/icons/arrow-right.png"/></button>
              </div>
             
            </div>
             <footer>
               <div class = "active"></div>

               <div></div>
               <div></div>
               <div></div>
             </footer>
           </div>
           <div class = "card-container">
             <div class = "card-buttons">
              <div>
                 <button class = "transparent-button">
                  <img src = "images/icons/heart.png"/>
                </button>
              </div>
              <div>
                 <button class = "transparent-button">
                  <img src = "images/icons/chat.png"/>
                </button>
              </div>
              <div>
                 <button class = "transparent-button">
                  <img src = "images/icons/paper-plane.png"/>
                </button>
              </div>
               <div class = "last-card-button">
                 <button class = "transparent-button">
                  <img src = "images/icons/bookmark.png"/>
                 </button>
               </div>
             </div>
             <div class = "card-likes">
              taeyun_kwon1118님 외 여러 명이 좋아합니다
             </div>
             <div class = "card-contents">
              <ul>
                <li>
                  <div>
                   <span>taeyun_kwon1118</span>
                   여행 사진 올립니다. 좋아요 부탁 드려요 !!!
                  </div>
                </li>
                <li class = "comment">
                  <div>
                   <span>taeyun_kwon1118</span>
                   댓글 1
                   <button class = "transparent-button">
                     <img src = "images/icons/heart.png"/>
                   </button>
                  </div>
                </li>
                <li class = "comment">
                  <div>
                   <span>taeyun_kwon1118</span>
                  댓글 2
                   <button class = "transparent-button">
                     <img src = "images/icons/heart.png"/>
                   </button>
                  </div>
                </li>
              </ul>
             </div>
             <div class = "card-time">
              7일 전
             </div>
           </div>
      	</main>
      	<footer class = "card-comment">
         <input type = "text" placeholder = "댓글 달기..." name = "comment">
         <div>
          <button class = "transparent-button"> 게시</button>
          </div> 
      	</footer>
      
      </article>
    </section>
    <script type = "text/javascript" src = "scripts/carousel.js"></script>
    <script type = "text/javascript" src = "scripts/smoothscroll.min.js"></script>
  </body>
 </html>
!function(){"use strict";function o(){var o=window,t=document;if(!("scrollBehavior"in t.documentElement.style&&!0!==o.__forceSmoothScrollPolyfill__)){var l,e=o.HTMLElement||o.Element,r=468,i={scroll:o.scroll||o.scrollTo,scrollBy:o.scrollBy,elementScroll:e.prototype.scroll||n,scrollIntoView:e.prototype.scrollIntoView},s=o.performance&&o.performance.now?o.performance.now.bind(o.performance):Date.now,c=(l=o.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(l)?1:0);o.scroll=o.scrollTo=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?h.call(o,t.body,void 0!==arguments[0].left?~~arguments[0].left:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:o.scrollY||o.pageYOffset):i.scroll.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:o.scrollY||o.pageYOffset))},o.scrollBy=function(){void 0!==arguments[0]&&(f(arguments[0])?i.scrollBy.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):h.call(o,t.body,~~arguments[0].left+(o.scrollX||o.pageXOffset),~~arguments[0].top+(o.scrollY||o.pageYOffset)))},e.prototype.scroll=e.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==f(arguments[0])){var o=arguments[0].left,t=arguments[0].top;h.call(this,this,void 0===o?this.scrollLeft:~~o,void 0===t?this.scrollTop:~~t)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},e.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},e.prototype.scrollIntoView=function(){if(!0!==f(arguments[0])){var l=function(o){for(;o!==t.body&&!1===(e=p(l=o,"Y")&&a(l,"Y"),r=p(l,"X")&&a(l,"X"),e||r);)o=o.parentNode||o.host;var l,e,r;return o}(this),e=l.getBoundingClientRect(),r=this.getBoundingClientRect();l!==t.body?(h.call(this,l,l.scrollLeft+r.left-e.left,l.scrollTop+r.top-e.top),"fixed"!==o.getComputedStyle(l).position&&o.scrollBy({left:e.left,top:e.top,behavior:"smooth"})):o.scrollBy({left:r.left,top:r.top,behavior:"smooth"})}else i.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function n(o,t){this.scrollLeft=o,this.scrollTop=t}function f(o){if(null===o||"object"!=typeof o||void 0===o.behavior||"auto"===o.behavior||"instant"===o.behavior)return!0;if("object"==typeof o&&"smooth"===o.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+o.behavior+" is not a valid value for enumeration ScrollBehavior.")}function p(o,t){return"Y"===t?o.clientHeight+c<o.scrollHeight:"X"===t?o.clientWidth+c<o.scrollWidth:void 0}function a(t,l){var e=o.getComputedStyle(t,null)["overflow"+l];return"auto"===e||"scroll"===e}function d(t){var l,e,i,c,n=(s()-t.startTime)/r;c=n=n>1?1:n,l=.5*(1-Math.cos(Math.PI*c)),e=t.startX+(t.x-t.startX)*l,i=t.startY+(t.y-t.startY)*l,t.method.call(t.scrollable,e,i),e===t.x&&i===t.y||o.requestAnimationFrame(d.bind(o,t))}function h(l,e,r){var c,f,p,a,h=s();l===t.body?(c=o,f=o.scrollX||o.pageXOffset,p=o.scrollY||o.pageYOffset,a=i.scroll):(c=l,f=l.scrollLeft,p=l.scrollTop,a=n),d({scrollable:c,method:a,startTime:h,startX:f,startY:p,x:e,y:r})}}"object"==typeof exports&&"undefined"!=typeof module?module.exports={polyfill:o}:o()}();
window.addEventlistener('load', function(){
	var carousels = document.getElementsByClassName('carousel');
	for(var i = 0; i < carousels.length; i++)
	{
		addEventToCarousel(carousels[i]);
	}
});

function addEventToCarousel(carouselElem){
	var ulElem = carouselElem.querySelector('ul');
	var liElems = ulElem.querySelectorAll('li');

	//너비 값 조정
	var liWidth = liElems[0].clientWidth;//600px
	var adjustedWidth = liElems.length * liWidth;
	ulElem.style.width = adjustedWidth + 'px';

	//슬라이드 버튼 이벤트 등록
	var slideButtons = carouselElem.querySelectorAll('.slide');
	for(var i = 0; i < slideButtons.length; i++)
	{
		slideButtons[i].addEventlistener('click', createListenerSlide(carouselElem));
	}

}

function createListenerSlide(carouselElem){
	return function(event){
		var clickedButton = event.currentTarget;

		var liElems = carouselElem.querySelectorAll('li');
		var liCount = liElems.length;
		var currentIndex = carouselElem.attributes.data.value;

		if(clickedButton.className.includes('right') && currentIndex < licount - 1){
          currentIndex ++;
          scrollDiv(carouselElem, currentIndex);
		} else if(clickedButton.className.includes('left') && currentIndex > 0){
			currentIndex --;
			scrollDiv(carouselElem, currentIndex);
		}

		// indicator update
		// slide button 보여줌 여부 update
        // 새롭게 보여지는 이미지 인덱스 값을 현재 data값으로 업데이트
		carouselElem.attributes.data.value = currentIndex;
	}
}

function scrollDiv(carouselElem, nextIndex){
	var scrollable = carouselElem.querySelector('div');
	var liWidth = scrollable.clientWidth;
	var newLeft = liWidth * nextIndex;

	scrollable.scrollTo({left: newleft, behavior: 'smooth'});

}

 

 

 

 

HTML/CSS javascript

Answer 1

0

communityai8509

안녕하세요, 인프런 AI 인턴이에요. 화면 오른쪽 스크롤이 넘어가지지 않는 문제에 대해 도움을 드릴게요.

스크롤이 제대로 동작하지 않는 이유는 주로 스크롤 가능한 영역을 설정하는 CSS 속성이 잘못되어서 발생합니다. 현재 작성하신 코드를 보면 스크롤 가능한 요소에 대한 CSS가 포함되어 있지 않습니다.

따라서, 스크롤이 동작하도록 하기 위해서는 스타일 시트에 .card 클래스에 overflow-x: auto; 를 추가하시면 됩니다. 즉, card.css 파일에 다음과 같이 스타일을 추가해주세요:

.card {
  overflow-x: auto;
}

위의 코드를 추가하시면 카드가 가로 스크롤 가능한 영역이 되어 오른쪽 스크롤이 정상적으로 동작할 수 있어요.

이렇게 해결되지 않는다면, 다른 요소나 스타일이 스크롤 이슈를 발생시키는 것일 수 있으니, 조금 더 자세한 정보를 알려주시면 더 도움을 드릴 수 있을 것 같아요. 어떠한 문제가 있으신지 더 자세하게 알려주시면 감사하겠습니다. 그럼 좋은 결과 있기를 바래요!

unregistered 이라 뜨며 작동하지 않습니다.

0

51

1

공부한 내용을 블로그에 정리해서 올려도되나요?

0

95

1

sublime text 설치 불가

0

177

1

사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다

0

99

1

처음 질문과 옵션 관련 질문입니다.

0

90

1

마지막에 news 관련 질문

0

83

1

태그 닫는 단축키가 뭔가요?

0

170

1

강의에 사용하는 예제 코드 자료 있나요?

0

385

1

회원가입 폼 검증하기 실행이 안됩니다.

0

274

1

이미지랑 아이콘 파일을 어떻게 찾아요?

0

352

1

VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요

0

476

0

프로젝트 고민 해결이 안되어 다시 올립니다.

0

394

1

프로젝트 고민 다시올립니다.

0

448

1

친구와의 프로젝트 고민

0

421

1

학과 설정

0

331

2

회원가입폼 검증 -2 에서 문제가생겼습니다

0

331

1

card.html 버튼 위치

0

603

1

인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요

0

357

2

carousel의 footer부분에

0

295

1

margin 값에 관한 질문입니다.

0

407

1

function clearMessages() 함수의 원리를 알고싶습니다

0

320

1

removeEventListener

0

237

1

버튼을 눌렀을때 케러셀의 이동

0

810

2

html 파일 올립니다!

0

376

1