VUEJS scrollbar div içerisinde aşağıya indirmek
Merhaba,
Bootstrap kullanıyorum ve offcanvas modalinin içerisinde scrollbar'ın tıklandığında aşağıya inmesini istiyorum ama bir türlü olmadı.
Metoda tıkladığımda açılan offcanvas veri yüklendikten sonra otomatik aşağıya insin istiyorum, nasıl yapabilirim?
// kodlarınız buraya eklenecek
const el = this.$refs.scrollToMe;
if (el) {
el.scrollIntoView({ behavior: "smooth" });
}
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (1)
Offcanvas modalinde scrollbar'ın tıklandığında aşağıya inmesini sağlamak için aşağıdaki adımları izleyebilirsiniz:
Offcanvas modalinin içerisindeki verilerin yüklendiğinden emin olun. Veriler yüklendikten sonra, scrollbar'ın aşağıya inmesini istediğiniz öğenin id veya ref özelliğine sahip olduğundan emin olun.
Offcanvas modalinin shown.bs.offcanvas etkinliği için bir dinleyici oluşturun. Bu dinleyici, offcanvas modalinin açıldığı zaman çalışacak ve scrollbar'ın aşağıya inmesini sağlayacak kodları içerecektir.
Örneğin, scrollIntoView yöntemini kullanarak belirli bir öğenin görüntülenebilir olmasını sağlayabilirsiniz. Bu yöntemi, shown.bs.offcanvas etkinliği dinleyicisi içinde kullanabilirsiniz. Örneğin:
$('#myOffcanvas').on('shown.bs.offcanvas', function () {
var el = document.getElementById('myElement'); // myElement, scrollbar'ın aşağıya inmesini istediğiniz öğenin id'si
if (el) {
el.scrollIntoView({ behavior: "smooth" }); // offcanvas modalinde görünür hale getirmek istediğiniz öğenin aşağıya kaydırılması
}
});
Yukarıdaki kodu, kendi offcanvas modalinizdeki öğelerin id özellikleriyle değiştirin ve bu kodu kullanarak scrollbar'ın tıklandığında aşağıya inmesini sağlayabilirsiniz.