angularjs 指令實現(xiàn)自定義滾動條效果

更新時間：2024年03月20日 11:20:08 作者：發(fā)啊發(fā)程序猿

橫向商品欄,把原有的滾動條改成自定義的樣式,并且給兩邊加上箭頭可以調整,可以拖動商品和滾輪實現(xiàn)滾動條效果,這篇文章主要介紹了angularjs 指令實現(xiàn)自定義滾動條效果,需要的朋友可以參考下

場景：橫向商品欄，把原有的滾動條改成自定義的樣式，并且給兩邊加上箭頭可以調整，可以拖動商品和滾輪實現(xiàn)滾動條效果。

js

appService.directive('customScrollbar', function() {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
            enableMouseWheel: '=?' // default false
        },
        template: `
            <div class="customScrollbar">
                <div class="scrollContent">
                    <div class="detailContent" ng-mouseenter="enableMouseWheel === true && enableWheelScroll()" ng-mouseleave="enableMouseWheel === true && disableWheelScroll()" id="detailContent" ng-transclude>
                    </div>
                    <div class="scrollBarContent">
                        <div class="scrollbar">
                            <div class="scrollbar-thumb"></div>
                        </div>
                        <img src="./images/home/icon_left.png" alt="Left Arrow" class="scroll-arrow left">
                        <img src="./images/home/icon_right.png" alt="Right Arrow" class="scroll-arrow right">
                    </div>
                </div>
            </div>
        `,
        link: function(scope, element) {
            if (scope.enableMouseWheel === undefined) {
                scope.enableMouseWheel = false;
            }
            var content = element.find('.detailContent');
            var scrollbar = element.find('.scrollbar');
            var thumb = element.find('.scrollbar-thumb');
            var leftArrow = element.find('.scroll-arrow.left');
            var rightArrow = element.find('.scroll-arrow.right');
            checkArrowVisibilityByInit();
            content.scroll(function() {
                var scrollLeft = content.scrollLeft();
                var scrollRatio = scrollLeft / (content[0].scrollWidth - content.width());
                var newLeft = scrollRatio * (scrollbar.width() - thumb.width());
                thumb.css('left', newLeft);
                checkArrowVisibilityByScroll(scrollLeft);
            });
            leftArrow.click(function() {
                var newScrollLeft = content.scrollLeft() - 500;
                content.animate({scrollLeft: newScrollLeft}, 500);
            });
            rightArrow.click(function() {
                var newScrollLeft = content.scrollLeft() + 500;
                content.animate({scrollLeft: newScrollLeft}, 500);
            });
            var isDragging = false;
            var startX, startLeft;
            thumb.mousedown(function(e) {
                isDragging = true;
                startX = e.pageX;
                startLeft = thumb.position().left;
                e.preventDefault();
            });
            $(document).mousemove(function(e) {
                if (isDragging) {
                    var offsetX = e.pageX - startX;
                    var newLeft = Math.min(Math.max(0, startLeft + offsetX), scrollbar.width() - thumb.width());
                    var scrollRatio = newLeft / (scrollbar.width() - thumb.width());
                    var newScrollLeft = scrollRatio * (content[0].scrollWidth - content.width());
                    thumb.css('left', newLeft);
                    content.scrollLeft(newScrollLeft);
                }
            }).mouseup(function() {
                isDragging = false;
            });
            function checkArrowVisibilityByInit() {
                if (content.width() >= content[0].scrollWidth) {
                    leftArrow.hide();
                    rightArrow.hide();
                } else {
                    leftArrow.hide(); //init content.scrollLeft() = 0;
                    rightArrow.show();
                }
            }
            function checkArrowVisibilityByScroll(scrollLeft) {
                if (scrollLeft === 0) {
                    leftArrow.hide();
                } else {
                    leftArrow.show();
                }
                if (scrollLeft >= content[0].scrollWidth - content.width()) {
                    rightArrow.hide();
                } else {
                    rightArrow.show();
                }
            }
            //============ Enable wheel scrolling when mouse enters
            scope.enableWheelScroll = function() {
                element.on('wheel', function(e) {
                    e.preventDefault();
                    const delta = e.originalEvent.deltaY;
                    content.scrollLeft(content.scrollLeft() + delta);
                });
            };
            scope.disableWheelScroll = function() {
                element.off('wheel');
            };
            //============ end
            //============ Implement scrollbar effect when dragging products with the mouse
            var isFinancialContentMouseDown = false;
            var startX;
            var scrollLeft;
            content.on('mousedown', function(e) {
                isFinancialContentMouseDown = true;
                startX = e.pageX - $(this).offset().left;
                scrollLeft = $(this).scrollLeft();
            });
            content.on('mousemove', function(e) {
                if (!isFinancialContentMouseDown) return;
                e.preventDefault();
                const x = e.pageX - $(this).offset().left;
                const walk = (x - startX) * 3;
                $(this).scrollLeft(scrollLeft - walk);
            });
            $(document).on('mouseup', function() {
                isFinancialContentMouseDown = false;
            });
            content.on('mouseleave', function() {
                isFinancialContentMouseDown = false;
            });
            //============end
        }
    };
});

css

/*customscroll*/
.customScrollbar .detailContent{width: 100%;display: flex;margin-top: 102px;gap: 30px;overflow-y: auto;overflow-x: hidden;}
.customScrollbar .scrollContent{position: relative}
.customScrollbar .scrollBarContent{width: 100%;display: flex;justify-content: center;margin-top: 40px}
.customScrollbar .scrollbar {width: 410px;height: 6px;background-color: #DAD2D2;position: absolute;bottom: 0;left: 50%;cursor: pointer;border-radius: 15px;transform: translateX(-50%);}
.customScrollbar .scrollbar-thumb {width: 96px;height: 133%;background-color: #E43134;position: absolute;left: 0;cursor: pointer;border-radius: 15px;top:-1px}
.customScrollbar .scroll-arrow {position: absolute;top:  calc(50% - 40px);;transform: translateY(-50%);cursor: pointer;}
.customScrollbar .scroll-arrow.left {left: 0;transform: translateX(-150%);width: 44px;height: 44px;}
.customScrollbar .scroll-arrow.right {right: 0;transform: translateX(150%);width: 44px;height: 44px;}

html

<!--  custom-scrollbar="home"可以改成 custom-scrollbar，
						加了home是為了后面可能有多個滾動條的時候添加的唯一標識，但代碼還沒實現(xiàn)，遇到再改-->
				<div custom-scrollbar="home">
				<!-- 里面的item自己填上，一般都是循環(huán)load items出來-->
					<div class="box textBg fundBg">
						<span class="text">{{'webPage.body.home.A'|translate}}</span>
					</div>
					<div class="box textBg bondBg">
						<span class="text">{{'webPage.body.home.B'|translate}}</span>
					</div>
					<div class="box textBg structureBg">
						<span class="text">{{'webPage.body.home.C'|translate}}</span>
					</div>
					<div class="box textBg cryptocurrencyBg">
						<span class="text">{{'webPage.body.home.D'|translate}}</span>
					</div>
					<div class="box textBg swapsBg">
						<span class="text">{{'webPage.body.home.E'|translate}}</span>
					</div>
				</div>

效果