如果我将带有mousedown和mousedown事件的活动选项卡移动到右侧或左侧，如果选项卡超出滚动宽度，则非活动选项卡将获得波动。所有选项卡都被指定为类。活动选项卡被视为当前类。如何解决此问题并根据项目中左右两侧的选项卡移动平滑移动滚动条。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function () {
var limit = $(".limit").innerWidth(); var Right;
console.log("parent width" + limit);
var one, two;
console.log("window width" + window.innerWidth);
var counts = $(".limit").children().length;
var singletabwidth = $(".limit").children().width();
var total = counts * singletabwidth;
console.log("the total tabs width" + total);
console.log("single tab width " + singletabwidth);
var l = $(".limit");
console.log("the total number of childrens are" + counts);
var drag_min_xpos, drag_max_xpos, original_xpos;
var CursorLeft, CursorRight,Left;
$(".button").mousedown(function (event) {
if (event.which === 1) {
var tab_id = $(this).attr('data-tab');
$('.tab').removeClass('current');
var one = $(this);
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
var button = $(this);
var button_id = button.attr('id');
var parent_width = button.parent().innerWidth();
var left = parseInt(button.css('left'));
original_xpos = button.position().left;
Right = original_xpos + $(button).innerWidth;
drag_min_xpos = 0 - original_xpos;
drag_max_xpos = parent_width - original_xpos - button.outerWidth();
var drag_start_xpos = event.clientX;
var my_xpos = original_xpos;
Left = event.pageX - my_xpos;
$('.button').each(function (i) {
$(this).attr('data-order', (i + 1));
});
var prev_button = button.prev('.button');
var next_button = button.next('.button');
var prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
var next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
$(window).on('mousemove', function (event) {
console.log("max drag" + drag_max_xpos);
console.log("min drag" + drag_min_xpos);
console.log("start position" + drag_start_xpos);
CursorLeft = event.pageX - Left;
console.log("cursorLeft=" + CursorLeft);
CursorRight = CursorLeft + $(button).width();
console.log("cursorRight=" + CursorRight);
console.log("scrollx" + window.scroll);
console.log("documentElement Client Width" + document.body.clientWidth);
button.addClass('drag');
console.log("Left position" + my_xpos);
var direction = my_xpos > button.position().left ? 'left' : 'right';
var new_left = left + (event.clientX - drag_start_xpos);
my_xpos = button.position().left;
button.css({ left: new_left + 'px' });
if (new_left < drag_min_xpos)
{
button.css({ left: drag_min_xpos + 'px' }); }
if (new_left > drag_max_xpos)
{
button.css({ left: drag_max_xpos + 'px' }); }
if (direction == 'right' && next_button_xpos != '') {
$(l,".current").scrollLeft(my_xpos);
if ((my_xpos + 50) > next_button_xpos) {
next_button.css({ left: (parseInt(next_button.css('left')) - next_button.outerWidth(true)) + 'px' });
var tmp_order = next_button.attr('data-order');
next_button.attr('data-order', button.attr('data-order'));
button.attr('data-order', tmp_order);
prev_button = next_button;
next_button = next_button.nextAll('.button:not(.drag)').first();
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
}
} else if (direction == 'left' && prev_button_xpos != '') {
if (my_xpos < (prev_button_xpos + 50)) {
$(".current",l).scrollLeft(drag_min_xpos);
prev_button.css({ left: (parseInt(prev_button.css('left')) + prev_button.outerWidth(true)) + 'px' });
var tmp_order = prev_button.attr('data-order');
prev_button.attr('data-order', button.attr('data-order'));
button.attr('data-order', tmp_order);
next_button = prev_button;
prev_button = prev_button.prevAll('.button:not(.drag)').first();
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
}
}
});
$(window).on('mouseup', function (event) {
dragging = null;
if (event.which === 1) {
$(l).stop(AnimationEvent);
$('.button').removeClass('drag');
$(window).off('mouseup mousemove');
one = null; two = null;
$('.button').each(function () {
var this_order = parseInt($(this).attr('data-order'));
var prev_order = $(this).siblings('.button[data-order="' + (this_order - 1) + '"]');
if (prev_order.length > 0) { $(this).insertAfter(prev_order); }
});
$('.button').css('left', '0'); $('.button').removeAttr('data-order');
}
});
}
});
});
</script>
<style>
.limit
{
white-space:nowrap;
overflow-y:hidden;
overflow-x:scroll;
}
.parent {
position:relative;
margin: 20px;
width: 800px;
height: 40px;
}
.button {
position:relative;
display: inline;
width: 200px;
height: 75px;
background-color:lightgray;
font-size:large;
-webkit-transform: perspective(100px)rotateX(30deg);
-moz-transform: perspective(100px)rotateX(30deg);
}
.button:hover {
cursor: default;
}
.button:active
{
cursor:move;
z-index:40;
}
.button.drag {
z-index: 99;
background-color:orange;
}
.pic
{
height:400px;
width:700px;
}
button.current{
background-color:greenyellow;
}
.tab-content{
margin-top:40px;
display: none;
background-color:lightgoldenrodyellow;
height:450px;
width:800px;
}
.tab-content.current{
display: inherit;
position:absolute;
}
</style>
</head>
<body>
<div id="parent" class="parent">
<div class="limit">
<button data-tab="tab-1" class="button current " >Car 1</button>
<button data-tab="tab-2" class="button">Car 2</button>
<button data-tab="tab-3" class="button">Car 3</button>
<button data-tab="tab-4" class="button">Car 4</button>
<button data-tab="tab-5" class="button">Car 5</button>
<button data-tab="tab-6" class="button">Computer</button>
<button data-tab="tab-7" class="button">Message</button>
<button data-tab="tab-8" class="button">Nature</button>
<button data-tab="tab-9" class="button">Power</button>
</div>
<div id="tab-1" class="tab-content current">
<img src="Images/Ford-Mustang.jpg" class="pic" /> Car 1
</div>
<div id="tab-2" class="tab-content" >
<img src="Images/car%201.jpg" class="pic"/>Car 2
</div>
<div id="tab-3" class="tab-content">
<img src="Images/car%202.jpg" class="pic"/> Car 3
</div>
<div id="tab-4" class="tab-content">
<img src="Images/car%203.jpg" class="pic"/>Car 4
</div>
<div id="tab-5" class="tab-content">
<img src="Images/car%204.jpg" class="pic"/>Car 5
</div>
<div id="tab-6" class="tab-content">
<img src="Images/computer.jpg" class="pic"/>Computer
</div>
<div id="tab-7" class="tab-content">
<img src="Images/Message.GIF" class="pic"/>Message
</div>
<div id="tab-8" class="tab-content">
<img src="Images/nature.jpg" class="pic"/>Nature
</div>
<div id="tab-9" class="tab-content">
<img src="Images/power.jpg" class="pic"/>Power
</div>
</div>
</body>
</html>
如何解决此问题。并成功运行我的项目？
的问题： -
1.当前标签移动超过滚动宽度时，会引发波动。
2.使用活动标签滚动不移动？