Как переместить прокрутку и вкладку по умолчанию параллельно на основе позиции () для левой и правой сторон?
Хай. Мой проект - это приложение Google Module Tab, использующее html,css, jquery. здесь я беру 10 вкладок в div. вкладки переполнения, назначенные как scroll.so просматривается полоса прокрутки по умолчанию.Для завершения моего проекта я настраиваю левую боковую движущуюся вкладку и положение прокрутки по умолчанию и перемещаю вкладку с помощью scrollLeft () на основе их текущих позиций.Левая сторона полностью работает.Если я попробую это сделать со второй стороны, то возникнут некоторые колебания.Как настроить вкладку и положение прокрутки по умолчанию как параллельное с правой стороны и удалить колебания во время движения.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/jquery.min.js"></script>
<script>
$(document).ready(function () {
var limit = $(".limit").innerWidth(); var Right,maxScrollLeft,count=0;
console.log("parent width" + limit);
var one, two; var left1;
//two = $(".limit").css({ "overflow-x": "auto" });
var p = $("#parent");
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");
var e,b1;
console.log("the total number of childrens are" + counts);
var drag_min_xpos, drag_max_xpos, original_xpos;
var CursorLeft, CursorRight,Left;
var tab_id; var li = $(".limit").width();
var button, button_id, parent_width, left, original_xpos, my_xpos, prev_button, drag_start_xpos;
var next_button, prev_button_pos, next_button_pos, drag = null;
var tabLeft, tabTop, tabRight, tabBottom,Top2,Left2,T,outsideLeft,outsideRight,outsideBottom,outsideTop,P;
var X, Y,CursorBottom,CursorTop,direction;
P = $("#parent").offset();
outsideLeft = P.left;
outsideRight = outsideLeft + $("#parent").width();
outsideTop = P.top;
outsideBottom = outsideTop + $("#parent").height();var b;
$(".button").mousedown(function (event) {
if (event.which === 1) {
tab_id = $(this).attr('data-tab');
$('.tab').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
button = $(this);
drag = $(this);
T = $(this).offset();
tabLeft = event.pageX - T.left;
if (count != 0) {
$(button).removeClass("current");
}
button_id = button.attr('id');
parent_width = button.parent().innerWidth();
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();
drag_start_xpos = event.clientX;
my_xpos = original_xpos;
Left = event.pageX - my_xpos;
$('.button').each(function (i) {
$(this).attr('data-order', (i + 1));
});
prev_button = button.prev('.button');
next_button = button.next('.button');
prev_button_xpos = prev_button.length > 0 ? prev_button.position().left : '';
next_button_xpos = next_button.length > 0 ? next_button.position().left : '';
$(window).on('mousemove', function (event) {
X = event.clientX;
Y=event.clientY;
tab_id = $(this).attr('data-tab');
$('.tab').removeClass('current');
$(this).addClass('current');
var one = $(this);
$(button).addClass('drag');
direction = my_xpos > button.position().left ? 'left' : 'right';
var new_left = left + (event.clientX - drag_start_xpos);
my_xpos =button.position().left;
if (direction=='right') {
console.log("direction" + direction);
console.log(my_xpos);
console.log(original_xpos);
}
else
{
console.log("direction" + direction);
console.log("my x pos"+my_xpos);
console.log("original x pos"+original_xpos);
}
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') {
if (my_xpos > original_xpos) {
if (X > 1000) {
direction = 'right';
console.log("direction" + direction);
console.log("myx_pos" + my_xpos);
console.log("button.pos().left" + button.position().left);
//b1 = event.pageX - event.clientX;
b1 = my_xpos-prev_button_xpos-(event.pageX-event.clientX);
console.log("event.ClientX" + event.clientX);
console.log("b1"+b1);
console.log("pageX" + event.pageX);
$(l).scrollLeft(event.pageX+b1);
my_xpos = my_xpos + b1;
if (drag) {
tabLeft = event.pageX - T.left;
CursorLeft = event.pageX - tabLeft;
CursorRight = CursorLeft + $(button).width();
//CursorTop = event.pageY - Top2;
//CursorBottom = CursorTop + $(button).height();
if (((CursorTop >= outsideTop) && (CursorTop <= outsideBottom)) && ((CursorLeft >= outsideLeft) && (CursorLeft <= outsideRight)))
if ((((CursorRight) >= outsideLeft) && ((CursorRight) <= outsideRight)) && ((CursorBottom >= outsideTop) && ((CursorBottom) <= outsideBottom))) {
drag.offset({
//top: event.pageY - Top2,
left: event.pageX - tabLeft
});
}
}
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 : '';
}
}
$(button).offset({
left: event.clientX,
//top: event.pageY
});
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') {
if (my_xpos < original_xpos) {
if (X>=-1000) {
console.log(direction);
direction = 'left';
b = event.pageX + event.clientX;
console.log("event.clientX" + event.clientX);
console.log("event.pageX" + event.pageX);
console.log("b" + b);
$(l).scrollLeft(event.pageX + b);
my_xpos = my_xpos + b;
if (drag) {
CursorLeft = event.pageX - tabLeft;
CursorRight = CursorLeft + $(button).width();
//CursorTop = event.pageY - Top2;
//CursorBottom = CursorTop + $(button).height();
if (((CursorTop >= outsideTop) && (CursorTop <= outsideBottom)) && ((CursorLeft >= outsideLeft) && (CursorLeft <= outsideRight)))
if ((((CursorRight) >= outsideLeft) && ((CursorRight) <= outsideRight)) && ((CursorBottom >= outsideTop) && ((CursorBottom) <= outsideBottom))) {
drag.offset({
//top: event.pageY - Top2,
left: event.pageX - tabLeft
});
}
}
if (my_xpos < (prev_button_xpos + 50)) {
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 : '';
}
}
$(button).offset({
left: event.clientX,
//top: event.pageY
});
if (my_xpos < (prev_button_xpos + 50)) {
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;
$(button).removeClass("active");
button = null;
if (event.which === 1) {
count++;
$('.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>
.limit
{
white-space:nowrap;
overflow-y:hidden;
overflow-x:scroll;
position:relative;
}
#parent {
/*/*position:relative;*/
/*margin: 20px;
width: 800px;
height: 40px;*/
position:relative;
}
.button {
position:relative;
display: inline;
width: 170px;
height: 70px;
background-color:lightgray;
font-size:large;
-webkit-transform: perspective(100px)rotateX(30deg);
-moz-transform: perspective(100px)rotateX(30deg);
}
.button:hover {
cursor: default;
position:relative;
}
.button:active
{
cursor:move;
z-index:40;
background-color:lightpink;
}
.button.drag {
z-index: 99;
background-color:magenta;
}
.pic
{
height:400px;
width:700px;
}
button.current{
background-color:yellowgreen;
}
.tab-content{
margin-top:40px;
display: none;
background-color:lightgoldenrodyellow;
height:350px;
width:700px;
}
.tab-content.current{
display: inherit;
position:absolute;
}
</head>
<body>
<div id="parent" class="parent">
<div class="limit">
<button data-tab="1" class="button current " >Car 1</button>
<button data-tab="2" class="button">Car 2</button>
<button data-tab="3" class="button">Car 3</button>
<button data-tab="4" class="button">Car 4</button>
<button data-tab="5" class="button">Car 5</button>
<button data-tab="6" class="button">Computer</button>
<button data-tab="7" class="button">Message</button>
<button data-tab="8" class="button">Nature</button>
<button data-tab="9" class="button">Power</button>
</div>
<div id="1" class="tab-content current"> Car 1</div>
<div id="2" class="tab-content">Car 2</div>
<div id="3" class="tab-content"> Car 3</div>
<div id="4" class="tab-content">Car 4</div>
<div id="5" class="tab-content">Car 5</div>
<div id="6" class="tab-content">Computer</div>
<div id="7" class="tab-content">Message</div>
<div id="8" class="tab-content">Nature</div>
<div id="9" class="tab-content">Power</div>
</div>
</body>
</html>
Что я уже пробовал:
Прокрутка перемещение влево:-
1. я взял значения (event.pageX-event.clientX) как b.
2. переместите свиток в левую сторону с родительским контейнером $(l). Scrolleft(event.pageX+b).
3. свиток успешно переместился на левую сторону.
Правая сторона:-
1. для правой стороны я следую тому же сценарию,но получаю ошибку как слева, так и справа?как правильно перемещать прокрутку и вкладку в параллельные позиции как слева, так и справа ps