Создание прокрутки влево от кнопки прокрутки вправо

Извините, если этот вопрос глуп, но я новичок в jquery.Создание прокрутки влево от кнопки прокрутки вправо

У меня есть веб-страница с горизонтальной прокруткой, которая перемещается с помощью двух кнопок сверху. Кнопка, которая прокручивается вправо, отлично работает, но кнопка, которая прокручивается влево, всегда приведет вас к началу страницы независимо от того, что. Интересно, что не так с моим кодом!

WEB-страница: http://alicelanyang.com/richardhyatt/women.html

Сценарий, с стрелочкой быть один, который прокручивается вправо и стрелка кнопки налево тот, который прокручивается влево:

$(document).ready(function() { 
    var bodyWidth = $("body").width(), 
    wWidth = $(window).width(), 
    step = 400, 
    arrowButton = $("#arrow-button"), 
    pos = 0; 

arrowButton.click(function() { 
if (pos < bodyWidth) { 
    pos += step; 
} else { 
    pos = 0; 
} 

console.log(pos); 

$('body').animate({ scrollLeft: pos }, 1000); 
    }); 

$(document).ready(function() { 
    var bodyWidth = $("body").width(), 
    wWidth = $(window).width(), 
    step = -400, 
    arrowButton = $("#arrow-button-left"), 
    pos = 0; 

    arrowButton.click(function() { 
if (pos < bodyWidth - wWidth) { 
    pos += step; 
} else { 
    pos = 0; 
} 

console.log(pos); 

$('body').animate({ scrollLeft: pos }, 1000); 
    }); 
});

Любая помощь приветствуется!

источник

2016-10-31 Alice Yang

Вы возражаете обмена свой HTML, а? – Aer0

Ваша переменная 'pos' отличается между двумя функциями. Когда вы нажимаете правую позицию, вы переходите к 400, когда вы нажимаете налево, она переходит на -400. Вам понадобится одна переменная 'pos', доступная для обеих функций для поддержания фактической позиции. Левая стрелка должна быть 'pos-step', а стрелка вправо должна быть' pos + step'. – thepriebe

@thepriebe, который имеет полный смысл, и я здесь иду "duh!" Вы знаете, как я могу изменить код для одной позиции, но две кнопки со стрелками? –

Ошибка, кажется, в вашем состоянии if else.

Вы всегда возвращаетесь в исходное положение, нажимая на стрелку влево. Вы можете заменить pos = 0 на pos -= step.

источник

2016-10-31 20:25:33 Aer0

Вы можете попробовать что-то вроде этого. https://jsfiddle.net/4yberkho/1/

Если он будет прокручивать фиксированное значение, которое вы могли бы просто оживить тело приращения или декремента значения

arrowButtonLeft = $("#arrow-button-left"); 

arrowButton = $("#arrow-button"); 

// Right arrow click 
arrowButton.click(function(){ 

    // Animate the body to scroll right 400px 
    $('body').stop().animate({ scrollLeft: '+=400px' }, 1000); 

}); 

// Left arrow click 
arrowButtonLeft.click(function(){ 

    // Animate the body to scroll left 400px 
    $('body').stop().animate({ scrollLeft: '-=400px' }, 1000); 

});

источник

2016-10-31 20:29:14

Эй! Спасибо за ответ. Я внес изменения, но он все еще прокручивается до самого начала. Я также попытался заменить первый pos = 0 на post + = step, но он все еще не работает ... какие-то мысли? –

@AliceYang Вы можете попробовать изменить pos + = step; во втором случае, если оператор pos - = step; ? –

Я избавился от оператора if else, но кажется, что проблема в том, что у меня есть два значения pos для каждой кнопки! Независимо от того, где находится область просмотра, стрелка влево попытается достичь -400 из pos = 0. У вас есть идея идеи, как использовать один pos для обеих кнопок? –

Вот возможное решение для переменной пос изменяется на основе шаг и относительное положение.

$(document).ready(function() { 
 
var pos = 0; 
 
var step = 400; 
 
var bodyWidth = $("body").width(); 
 
var wWidth = $(window).width(); 
 
var nextArrowButton = $("#arrow-button"); 
 
var backArrowButton = $("#arrow-button-left"); 
 

 
nextArrowButton.click(function() { 
 
\t \t if (pos < bodyWidth) { 
 
    \t \t pos += step; 
 
\t \t } else { 
 
    \t \t pos = 0; 
 
\t \t } 
 
\t \t console.log(pos); 
 
\t $('body').animate({ scrollLeft: pos }, 1000); 
 
    }); 
 

 
backArrowButton.click(function() { 
 
\t \t if (pos < bodyWidth) { 
 
    \t \t pos -= step; 
 
\t \t } else { 
 
    \t \t pos = 0; 
 
\t \t } 
 
\t \t console.log(pos); 
 
\t \t $('body').animate({ scrollLeft: pos }, 1000); 
 
    }); 
 
});

источник

2016-10-31 20:59:13 thepriebe

Большое вам спасибо! Это потрясающе. –

Создание прокрутки влево от кнопки прокрутки вправо

ответ

Смежные вопросы