angularjs 指令实现自定义滚动条效果
更新时间：2024年03月20日 11:20:08 作者：发啊发程序猿
横向商品栏,把原有的滚动条改成自定义的样式,并且给两边加上箭头可以调整,可以拖动商品和滚轮实现滚动条效果,这篇文章主要介绍了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 自定义滚动条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文对angularjs的filter过滤器进行系统介绍，附上实例解析，便于理解。具有很好的参考价值，需要的朋友可以看下2016-12-12
本篇文章主要介绍了angular4 JavaScript内存溢出问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了AngularJS 表达式，这里整理了详细的资料，有需要的小伙伴可以参考下2016-09-09
Angular项目里ngsw-config.json文件作用详解
这篇文章主要为大家介绍了Angular项目里ngsw-config.json文件作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
本文主要介绍AngularJS 输入验证,这里对AngularJS 输入验证的资料做了整理,并附简单实例代码和效果图,有需要的小伙伴参考下2016-07-07
这篇文章主要介绍了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat这四个指令的讲解,需要的朋友可以参考下2015-06-06
众所周知AngularJS的双向绑定在表单应用中强大又方便，但是偶尔会遇到需要解除对象变量的双向绑定。Angular提供的angular.copy的方法可以实现解除双向绑定。所以这篇文章就来给大家详细的介绍下angular.copy，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-11-11
这篇文章主要介绍了AngularJS 的$timeout服务示例代码,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了详解Angular2 关于*ngFor 嵌套循环，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了angular手写树形二级表格的完整代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
最新评论