Остановить прокрутку, если содержимого не осталось

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я хочу, чтобы этот скрипт останавливал прокрутку при нажатии, когда в div больше не остается содержимого.

 $(document).ready(function () {
    $("#right").click(function () { 
        var leftPos = $('.DivDataMain').scrollLeft();
        $(".DivDataMain").animate({scrollLeft: leftPos   250}, 800);
    });   

    $("#left").click(function () { 
        var leftPos2 = $('.DivDataMain').scrollLeft();
        $(".DivDataMain").animate({scrollLeft: leftPos2 - 250}, 800);
    });   
});  
  

Это демонстрационная ссылка: FIDDLE

В демо-версии он продолжает прокручиваться вправо, хотя в div больше нет содержимого для отображения. Я хочу, чтобы это прекратилось.

Заранее спасибо.

Комментарии:

1. Ваша скрипка на самом деле не работает, но, просто поиграв с ней, я вижу, что вы задаете фиксированную ширину элементу, содержащему текст: width:90000px; . Это означает, что даже если содержимое меньше или больше 90000 пикселей в длину, раздел всегда будет равен 90000 пикселей

2. Итак, как заставить его работать без установки фиксированного значения положения и ширины?

3. Я только что ответил на ваш вопрос ниже 🙂

Ответ №1:

Вы должны добавить white-space: nowrap в свой #midleBody элемент и удалить width: 90000px из него.

Что происходит, так это то, что ваш элемент имеет фиксированную ширину, поэтому ваш javascript обнаруживает это и продолжает работать до конца. Вместо этого вам нужно, чтобы элемент динамически настраивался в соответствии с текстом внутри него, вот что white-space:nowrap делает.

Комментарии:

1. Привет, ты можешь восстановить мой код? Это очень плохо, когда я помещаю это в html-код. Я только что написал это в Fiddle, и это выглядит хорошо, но когда я перемещаю это в html-файл, я просто осознаю, что правый div находится в фиксированном положении с «right равно 0», так что он находится далеко от средних разделов. Я надеюсь, вы понимаете, о чем я говорю.

2. Нет, это не работает. Здесь я обновляю демонстрационную скрипку .. jsfiddle.net/Alkasih/UHmJ2/4 Я хочу, чтобы обертка теперь составляла 80%, а запас был автоматическим, чтобы он располагал весь div по центру основного текста. Но дело в том, что я хочу, чтобы левый div и правый div, которые функционируют как кнопка, были расположены помимо среднего div.