diff --git a/examples/tabs.html b/examples/tabs.html
index efc73c72..31d065a2 100644
--- a/examples/tabs.html
+++ b/examples/tabs.html
@@ -9,22 +9,22 @@
动态操作
-
+
-
Tab Content-1
-
Tab Content-2
-
Tab Content-3
-
Tab Content-4
-
Tab Content-5
-
Tab Content-6
+
Tab Content-1
+
Tab Content-2
+
Tab Content-3
+
Tab Content-4
+
Tab Content-5
+
Tab Content-6
diff --git a/src/modules/tabs.js b/src/modules/tabs.js
index 62a24965..2c4c9db8 100644
--- a/src/modules/tabs.js
+++ b/src/modules/tabs.js
@@ -735,11 +735,13 @@ layui.define('component', function(exports) {
var container = headerElem.parent();
var draggedElem;
var scrollable;
- var tabListSize;
- var containerSize;
- var scrollThreshold = 100;
+ var tabListScrollSize;
+ var tabListOuterSize;
var maxOffset = 0;
var minOffset;
+ var dragScrollLength = 35;
+ var dragScrollSpeed = 5;
+ var dragScrollPercentage = 12; // 容器边缘滚动区域大小,百分比值
var isDndElem = function(el) {
return el && el.nodeName.toLowerCase() == 'li' && !!el.getAttribute('lay-id');
@@ -750,9 +752,9 @@ layui.define('component', function(exports) {
if(isDndElem(this)){
this.draggable = true;
scrollable = container.hasClass('layui-tabs-scroll');
- tabListSize = headerElem.prop('scrollWidth');
- containerSize = headerElem.outerWidth();
- minOffset = containerSize - tabListSize;
+ tabListScrollSize = headerElem.prop('scrollWidth');
+ tabListOuterSize = headerElem.outerWidth();
+ minOffset = tabListOuterSize - tabListScrollSize;
}
});
headerElem.on('dragstart' + namespace, function(e) {
@@ -772,15 +774,15 @@ layui.define('component', function(exports) {
// 拖拽边缘滚动
if (scrollable) {
var containerRect = container[0].getBoundingClientRect();
- var isScrollLeft = e.clientX - containerRect.left < scrollThreshold;
- var isScrollRight = containerRect.right - e.clientX < scrollThreshold;
+ var isScrollLeft = (e.clientX - containerRect.left) / containerRect.width * 100 < dragScrollPercentage;
+ var isScrollRight = (containerRect.right - e.clientX) / containerRect.width * 100 < dragScrollPercentage
- if (!isScrollLeft && !isScrollRight) {
+ if (!(isScrollLeft || isScrollRight)) {
return;
}
- var step = 35;
- var rAFStep = 5;
+ var step = dragScrollLength;
+ var rAFStep = dragScrollSpeed;
var newOffset = headerElem.data('left') || 0;
var cb = function () {