Почему этот пользовательский слайдер анимации тома не работает должным образом?

Question

Я создал специальный слайдер анимации тома, но он не работает должным образом. У меня действительно возникают проблемы с выяснением того, что происходит - громкость и слайдер меняются, но не так, как ожидалось. Вот код:

$(function() { 
 
    var $volumeBar = $('#Volume-Bar'); 
 
    var $volumeContainer = $('#Volume-Container'); 
 
    var $value = $('.value'); 
 
    
 
    $volumeContainer.on('mousedown', function(event) { 
 
    var height = $volumeContainer.height(); 
 
    var startingCoord = event.offsetY; 
 
    var currentCoord; 
 
    var percent; 
 
    var difference; 
 
    seekingVol = true; 
 
    $volumeContainer.on('mouseup mouseleave', function() { 
 
     if (seekingVol) { 
 
     seekingVol = false; 
 
     } 
 
    }); 
 
    $volumeContainer.on('mousemove', function(event) { 
 
     if (seekingVol) { 
 
     currentCoord = event.offsetY; 
 
     percent = (currentCoord/height) * 100; 
 
     $value.html(percent + '%'); 
 
     $volumeBar.css({ 
 
      'height': percent + '%' 
 
     }); 
 
     } 
 
    }); 
 
    }); 
 
});

@import url(https://fonts.googleapis.com/css?family=Bitter:700); 
 

 
.value { 
 
-webkit-touch-callout: none; 
 
-webkit-user-select: none; 
 
-khtml-user-select: none; 
 
-moz-user-select: none; 
 
-ms-user-select: none; 
 
user-select: none; 
 
    position:absolute; 
 
    color:white; 
 
    width:100%; 
 
    text-align:center; 
 
    font-family:Bitter; 
 
    font-size:20px; 
 
    pointer-events:none; 
 
} 
 
#Volume-Container { 
 
    position:relative; 
 
    width:75px; 
 
    height:150px; 
 
    background-color:#0e2030; 
 
    display: -webkit-box; 
 
\t display: -webkit-flex; 
 
\t display: -ms-flexbox; 
 
\t display: flex; 
 
\t -webkit-box-orient:vertical; 
 
\t -webkit-box-direction:normal; 
 
\t -webkit-flex-direction:column; 
 
\t  -ms-flex-direction:column; 
 
\t   flex-direction:column; 
 
\t -webkit-box-align: center; 
 
\t -webkit-align-items: center; 
 
\t  -ms-flex-align: center; 
 
\t   align-items: center; 
 
\t -webkit-box-pack: center; 
 
\t -webkit-justify-content: center; 
 
\t  -ms-flex-pack: center; 
 
\t   justify-content: center; 
 
} 
 
#Volume-Bar { 
 
    position:absolute; 
 
    bottom:0px; 
 
    height:30%; 
 
    width:100%; 
 
    background-color:#6ab2f2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="Volume-Container"> 
 
    <div class="value">0%</div> 
 
    <div id="Volume-Bar"></div> 
 
</div>

Что случилось с этим?

Answer 1

Несколько ошибок.

• Вы используете модель FlexBox, которая является очень новой, плохо поддерживается и часто ошибочна. Просто, чтобы поставить один DIV внутри другого, закрепленного внизу, это такой уровень переполнения, что это даже не смешно. Вы можете центрировать свой объемный текст, поместив его в DIV, который соответствует самой большой высоте контейнера (150 пикселей) и настройке line-height на 150px. Ваш CSS может и должен быть много, много проще.
• Вы используете OffsetY, которую документация Mozilla через Google описывает как «экспериментальный». В Safari это похоже не работает должным образом, поэтому в этом браузере вы никогда не получите рабочий слайдер. Вам нужно использовать другой API.
• Вы, видимо, не понял, что координаты начинаются с 0 на верхней страницы или контейнеров и увеличение вниз, так что, когда вы вычисления процента, он получает ниже как указатель мыши ближе к сверху окна, а не выше. Это очень распространенное расположение для обработки координат в графических интерфейсах - (0,0) вверху слева, увеличивая положительное значение вправо и вниз.
• Вы не округлите вычисление до целого числа для отображения.
• Вы используете анимацию jQuery, но не отменяете предыдущую анимацию, поэтому они просто складываются один за другим, а jQuery будет запускать их последовательно, пока они не закончатся.
• Ваш HTML помещает текст процента объема за синим ползунком, чтобы ползунок скрывал текст.

Обращаясь некоторые из них:

$(function() { 
    var $volumeBar = $('#Volume-Bar'); 
    var $volumeContainer = $('#Volume-Container'); 
    var $value = $('.value'); 

    $volumeContainer.on('mousedown', function(event) { 
    var height = $volumeContainer.height(); 
    var top = $volumeContainer.position().top; 
    var startingCoord = event.clientY - top; 
    var currentCoord; 
    var percent; 
    var difference; 
    seekingVol = true; 
    $volumeContainer.on('mouseup mouseleave', function() { 
     if (seekingVol) { 
     seekingVol = false; 
     } 
    }); 
    $volumeContainer.on('mousemove', function(event) { 
     if (seekingVol) { 
     currentCoord = event.clientY - top; 
     percent = ((height - currentCoord)/height) * 100; 
     $value.html(Math.round(percent) + '%'); 
     $volumeBar.finish(); 
     $volumeBar.animate({ 
      'height': percent + '%' 
     }); 
     } 
    }); 
    }); 
}); 

В этом:

1. считывает top контейнера тома.
2. Выполняет исходную координату на основе неэкспериментального свойства clientY, которое является общесистемной координатой с верхней частью страницы (прокручивается или иным образом) в нуле, вычитая верхнюю часть контейнера томов из результата, чтобы получить смещение внутри этого контейнера тома. Здесь я не учитываю поля или дополнения. Вы могли бы сделать это в скрипте, но было бы намного проще настроить ваш HTML - например. добавление во внешнюю обертку DIV - так, что DDIV не имеет полей или отступов.
3. Использование Math.round для отображения.
4. Вычисляет процент как ((height - currentCoord)/height) * 100 так что теперь, в верхней части панели, вы получаете 100% вместо 0%.
5. Вызывает jQuery .finish для отмены предыдущих анимаций.На практике, учитывая вашу структуру кода и использование событий, это на самом деле означает, что на ползунке тома вообще нет анимации. Лично я полностью удалял эту анимацию и просто устанавливал высоту; это намного более отзывчиво и выглядит намного лучше, чем какая-то странная плавающая игра с ловушкой, которую вы могли бы получить в противном случае (и на самом деле будет довольно сложно кодировать, чтобы дать представление о том, как работает интерфейс анимации jQuery, от быстрого чтения их API docs).

Ваш процент текстовых исправлений, просто поменять местами порядок HTML:

<div id="Volume-Container"> 
    <div id="Volume-Bar"></div> 
    <div class="value">0%</div> 
</div> 

... но вы не сомневаетесь, уже выяснили, что сейчас, перетаскивая курсор на регулятор громкости иногда выбирает текст , Фиксирование это упражнение для читателя; лично я бы, вероятно, сдался и поместил текст под ползунок тома, где он не будет разборчивым по разным цветам фона при движении ползунка.