X 축 스크롤 막대를 두 지점 사이로 이동 제한

Question

이미지를 보여주는 이미지 캐 러셀을 만들고 x 축 스크롤 막대를 사용하면 다른 이미지가 표시됩니다. 그것은 올바르게 작동하지만 스크롤바가 뷰포트 내에서만 움직 이도록 제한하고 싶습니다. 나는 If clause를 시도했다. 그러나 그것은 버그를 가지고 있었다. 그리고 그것은 충분히 좋지 않았다! Amazon과 같은 회전식 모양을 만들려고했지만 제 경우에는 문제가 있습니다. 나는 JSfiddle 모든 HTMLCSS 및 JS 업로드 :

미리 감사드립니다.

Answer 1

left 및 right 여백으로 mouse-move 이벤트에 대한 if 조건을 수정했습니다. 현재 답변을 작성하는 데 도움이되는 답변을 추가했습니다.

그러나 바퀴를 재발 명할 필요는 없습니다.

이러한 유형의 사용자 지정 UI를 구현하기 위해 네이티브 스크롤 막대를 이용하는 라이브러리가 있습니다.

예는
https://github.com/buzinas/simple-scrollbar

이 단 하나이며 자세한 내용을 확인할 수 있습니다. 이 라이브러리에는 이전 브라우저에서 더 많은 지원을 추가하고 더 나은 성능을 제공하는 polyfill이 있기 때문입니다.

var div = document.getElementById('movesection'); 
 
var isDown = false; 
 
var x1 = 0; 
 
var rightPoint = 0; 
 
var scrollBar = document.querySelector(".feed-scrollbar"); 
 
var scrollBarthumb = document.querySelector(".feed-scrollbar-thumb"); 
 

 
div.addEventListener('mousedown', function(e) { 
 
    isDown = true; 
 
    rightPoint = document.getElementById('carousel-viewport').offsetWidth - (div.offsetLeft + div.offsetWidth); 
 
    x1 = e.clientX; 
 
}, true); 
 

 
document.addEventListener('mouseup', function() { 
 
    isDown = false; 
 
}, true); 
 

 
document.addEventListener('mousemove', function(event) { 
 
    event.preventDefault(); 
 

 
    var currentPosition = (x1 - event.clientX) + rightPoint; 
 
    var leftMargin = scrollBar.offsetWidth - scrollBarthumb.offsetWidth; 
 
    var rightMargin = 0; 
 

 
    if (isDown && currentPosition >= rightMargin && currentPosition <= leftMargin) { 
 
    div.style.right = currentPosition + 'px'; 
 
    } 
 
}, true);

.carousel { 
 
    width: 100%; 
 
    position: relative; 
 
    overflow: hidden; 
 
    background: #ebebeb; 
 
} 
 

 
.carousel .carousel-viewport { 
 
    width: 100%; 
 
    min-height: 80px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    position: relative; 
 
    margin: 0; 
 
} 
 

 
.carousel .carousel-viewport .carousel-ul { 
 
    display: inline-block; 
 
    position: relative; 
 
    right: 0; 
 
    margin: 0 0 14px; 
 
    padding: 0; 
 
} 
 

 
.carousel .carousel-viewport .carousel-ul .carousel-card { 
 
    display: inline-block; 
 
    text-align: center; 
 
    min-width: 145px; 
 
    max-width: 270px; 
 
    min-height: 200px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    vertical-align: top; 
 
    word-wrap: break-word; 
 
} 
 

 
.carousel .carousel-viewport .carousel-ul .carousel-card:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    min-height: inherit; 
 
} 
 

 
.carousel .carousel-viewport .carousel-ul .carousel-card img { 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 270px; 
 
    max-height: 200px; 
 
    vertical-align: middle; 
 
} 
 

 
.carousel .carousel-viewport .feed-carousel-control { 
 
    position: absolute; 
 
    top: 55px; 
 
    background-color: #fff; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    width: 45px; 
 
    text-align: center; 
 
    box-shadow: 0 1px 3px #888; 
 
    user-select: none; 
 
    -ms-user-select: none; 
 
    -webkit-user-select: none; 
 
    display: block; 
 
} 
 

 
.carousel .carousel-viewport .feed-right { 
 
    right: 0; 
 
    border-radius: 3px 0 0 3px; 
 
    clip: rect(-10px, 45px, 110px, -10px); 
 
    padding-left: 5px; 
 
} 
 

 
.carousel .carousel-viewport .feed-left { 
 
    left: 0; 
 
    border-radius: 0 3px 3px 0; 
 
    clip: rect(-10px, 55px, 110px, 0); 
 
    padding-right: 5px; 
 
} 
 

 
.carousel .carousel-viewport .feed-arrow { 
 
    display: inline-block; 
 
    line-height: normal; 
 
    vertical-align: top; 
 
    position: relative; 
 
    top: 50%; 
 
    height: 22px; 
 
    width: 13px; 
 
    margin-top: -11px; 
 
} 
 

 
.carousel .carousel-viewport .feed-scrollbar { 
 
    display: block; 
 
    position: absolute; 
 
    height: 6px; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    user-select: none; 
 
    -ms-user-select: none; 
 
    -webkit-user-select: none; 
 
    font-size: 0; 
 
} 
 

 
.carousel .carousel-viewport .feed-scrollbar .feed-scrollbar-track { 
 
    display: block; 
 
    background-color: #eee; 
 
    height: 1px; 
 
    border-radius: 4px; 
 
    width: 100%; 
 
    position: relative; 
 
    top: 2px; 
 
    margin: 0; 
 
} 
 

 
.carousel .carousel-viewport .feed-scrollbar .feed-scrollbar-track .feed-scrollbar-thumb { 
 
    display: block; 
 
    background-color: #aaa; 
 
    height: 6px; 
 
    border-radius: 6px; 
 
    width: 0; 
 
    position: absolute; 
 
    top: -2px; 
 
    margin: 0; 
 
    cursor: pointer; 
 
}

<div class="carousel"> 
 
    <div class="carousel-viewport" id="carousel-viewport"> 
 
    <span class="feed-scrollbar"> 
 
       <span class="feed-scrollbar-track"> 
 
        <span class="feed-scrollbar-thumb" id="movesection" style="width: 200px;right:0;display: block;"></span> 
 
    </span> 
 
    </span> 
 
    </div> 
 
</div>

그 일을했지만, 그것은 위로 마우스와 마우스 이동에 버그가