Как переместить позицию элемента x / y с помощью js?

Question

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

Я попробовал анимацию CSS, но, похоже, не то, что я хочу. так есть ли способ добиться того, чего я хочу?

Я написал демо здесь: https://codesandbox.io/s/keen-panini-hel36

Answer 1

Начните с добавления класса в div, который вы хотите переместить (moveDiv), и добавьте к нему стиль position:relative.

Затем добавьте класс к кнопке, которую вы хотите нажать, чтобы вызвать действие (actionButton).

После этого поместите следующий JavaScript в конец страницы между тегами

document.getElementsByClassName("actionButton").addEventListener('mousedown',function(){
    var left = document.getElementsByClassName("moveDiv")[0].style.left;
    left = left === '150px' ? 0 : '150px';
    document.getElementsByClassName("moveDiv")[0].style.left = left;
});

. При этом прослушиватель событий знает, когда мышь нажата (когда пользователь нажимает кнопку). Измените левую позицию в соответствии с вашими потребностями.