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 自定义滚动条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Angular通过angular-cli来搭建web前端项目的方法
这篇文章主要介绍了Angular通过angular-cli来搭建web前端项目的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
下面小编就为大家带来一篇angularjs中回车键触发某一事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本文对angularjs的filter过滤器进行系统介绍，附上实例解析，便于理解。具有很好的参考价值，需要的朋友可以看下2016-12-12
本文主要介绍AngularJS简单应用程序,这里提供了详细的流程和代码程序，有需要的小伙伴可以参考下2016-08-08
本篇文章主要介绍了浅谈angularr4生命周期钩子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了Angular2学习笔记——详解NgModule模块,现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要介绍了浅谈angularJS 作用域的相关资料,需要的朋友可以参考下2015-07-07
本文主要介绍AngularJS 输入验证,这里对AngularJS 输入验证的资料做了整理,并附简单实例代码和效果图,有需要的小伙伴参考下2016-07-07
Angular通过 HTTP Interceptor 实现 HTTP 请求超时监控的例子
这篇文章主要介绍了Angular 如何通过 HTTP Interceptor 实现 HTTP 请求的超时监控,本文通过例子给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要给大家介绍了关于angular中post请求处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-06-06
最新评论