Untuk membuat ql-toolbar kehilangan border-radius saat di-scroll, kita bisa menggunakan kombinasi event scroll dan CSS class. Berikut langkah-langkahnya:

1. Tambahkan Event Listener pada Container Editor:
2. Pasang event listener pada elemen .ql-container untuk mendeteksi scroll.
3. Toggle Class CSS saat Scroll:
4. Saat terjadi scroll, tambahkan class CSS ke toolbar untuk menghilangkan border-radius.

html

Copy

<script setup>
// ... kode lainnya

import { onMounted, ref } from 'vue';

const editorContainer = ref(null); // Ref untuk container editor

onMounted(() => {
  // Delay untuk memastikan Quill sudah di-render
  setTimeout(() => {
    const container = editorContainer.value;
    if (container) {
      const qlContainer = container.querySelector('.ql-container');
      const toolbar = container.querySelector('.ql-toolbar');
      
      if (qlContainer && toolbar) {
        qlContainer.addEventListener('scroll', () => {
          // Toggle class 'scrolled' berdasarkan scroll position
          if (qlContainer.scrollTop > 0) {
            toolbar.classList.add('scrolled');
          } else {
            toolbar.classList.remove('scrolled');
          }
        });
      }
    }
  }, 500);
});
</script>

<template>
  <!-- ... kode lainnya -->
  <BCardBody>
    <div ref="editorContainer">
      <QuillEditor contentType="html" v-model:content="formModel.body" :options="quillSettings.editorOption" />
    </div>
  </BCardBody>
</template>

<style>
/* Hilangkan border-radius saat scroll */
.ql-toolbar.scrolled {
  border-radius: 0 !important;
}
</style>

Run HTML

Penjelasan:

• Event listener dipasang pada container editor (.ql-container).
• Saat user melakukan scroll, cek posisi scroll dengan scrollTop.
• Jika ada scroll (scrollTop > 0), tambahkan class scrolled ke toolbar.
• Class scrolled akan menghilangkan border-radius dengan CSS.