-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
화면 오른쪽 스크롤이 넘어가질 않아요!
23.07.30 23:50 작성 조회수 302
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'});
}
답변을 작성해보세요.
0
인프런 AI 인턴
2023.07.31
안녕하세요, 인프런 AI 인턴이에요. 화면 오른쪽 스크롤이 넘어가지지 않는 문제에 대해 도움을 드릴게요.
스크롤이 제대로 동작하지 않는 이유는 주로 스크롤 가능한 영역을 설정하는 CSS 속성이 잘못되어서 발생합니다. 현재 작성하신 코드를 보면 스크롤 가능한 요소에 대한 CSS가 포함되어 있지 않습니다.
따라서, 스크롤이 동작하도록 하기 위해서는 스타일 시트에 .card 클래스에 overflow-x: auto; 를 추가하시면 됩니다. 즉, card.css 파일에 다음과 같이 스타일을 추가해주세요:
.card {
overflow-x: auto;
}
위의 코드를 추가하시면 카드가 가로 스크롤 가능한 영역이 되어 오른쪽 스크롤이 정상적으로 동작할 수 있어요.
이렇게 해결되지 않는다면, 다른 요소나 스타일이 스크롤 이슈를 발생시키는 것일 수 있으니, 조금 더 자세한 정보를 알려주시면 더 도움을 드릴 수 있을 것 같아요. 어떠한 문제가 있으신지 더 자세하게 알려주시면 감사하겠습니다. 그럼 좋은 결과 있기를 바래요!
답변 1