Плавная прокрутка на медленном устройстве

Question

Я строю умное зеркало с помощью малины pi 3 и электронного приложения. Поэтому мой интерфейс в основном хром с одностраничным приложением. У зеркала есть кнопки внизу, некоторые из которых предназначены для прокрутки, поэтому, нажимая их, я хочу плавно прокрутить содержимое div на 200 пикселей. В настоящее время я использую JQuery:

$('#content').animate({scrollTop: $('#content').scrollTop + 200}) 

Теперь, когда анимация не очень жидко, он заикается из-за низкой производительности в PI3 в. Я хотел бы знать, есть ли способ сделать это гладким. Нет никакого API-интерфейса для браузера, поэтому я думал о чем-то с CSS и, возможно, переводил на дочерний элемент. Есть ли какие-либо жидкие методы для этого?

EDIT: Я пробовал следующую структуру CSS:

#container { 
    overflow-y: hidden; 
    height: 200px; 
} 
#content { 
    transition: transform 0.2s ease-out; 
    transform: translate(0,0); 
} 
#content.s1 { 
    transform: translate(0,-200px); 
} 
#content.s2 { 
    transform: translate(0,-400px); 
} 

Теперь проблема будет знать, насколько высоким содержание и динамически добавлять соответствующие правила, так что есть достаточно sx классов и что последний прокручивается точно до дна и не дальше, поэтому он не оставляет уродливого промежутка под содержимым. Возможно ли это с помощью Javascript?

Answer 1

На производительность прокрутки может влиять очень большое количество факторов, например использование положения: фиксированное ... и т. Д., Поэтому возможно, что медленная прокрутка (aka jank), которую вы видите, вызвана другими факторами ,

При анимации что-то, как вы правильно указали, всегда используйте CSS-преобразование или непрозрачность.

Чтобы реализовать ваш запрос, я настраиваю преобразование через JavaScript, но анимируя через CSS. Конечно, вам нужно будет добавить пределы прокрутки, но я думаю, что это должно быть пояснительным:

var obj = document.getElementById("innerContent"); 

document.getElementById("down").addEventListener("click", function() { 
    var scrollY = obj.getAttribute("data-scrollY"); 
    scrollY = parseInt(scrollY) - 200; 
    obj.setAttribute("data-scrollY", scrollY) 
    obj.style.transform = "translateY(" + scrollY + "px)"; 
}); 

document.getElementById("up").addEventListener("click", function() { 
    var scrollY = obj.getAttribute("data-scrollY"); 
    scrollY = parseInt(scrollY) + 200; 
    obj.setAttribute("data-scrollY", scrollY) 
    obj.style.transform = "translateY(" + scrollY + "px)"; 
}); 

http://codepen.io/kevinfarrugia/pen/egdPJX