angularjs 指令实现自定义滚动条效果
作者：发啊发程序猿
横向商品栏,把原有的滚动条改成自定义的样式,并且给两边加上箭头可以调整,可以拖动商品和滚轮实现滚动条效果,这篇文章主要介绍了angularjs 指令实现自定义滚动条效果,需要的朋友可以参考下
场景：横向商品栏，把原有的滚动条改成自定义的样式，并且给两边加上箭头可以调整，可以拖动商品和滚轮实现滚动条效果。
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是为了后面可能有多个滚动条的时候添加的唯一标识，但代码还没实现，遇到再改-->
<div custom-scrollbar="home">
<!-- 里面的item自己填上，一般都是循环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>效果
到此这篇关于angularjs 指令实现自定义滚动条效果的文章就介绍到这了,更多相关angularjs 自定义滚动条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！