I have multiple scrollbars to my page, but can't make them working properly :
<div class="dates-container" v-for="id in ids">
<overlay-scrollbars
:ref="`datesHeader`+id"
:options="datesScrollOptions"
:key="id"
>
</div>
......
resetScroller() {
this.$nextTick(() => {
if (this.$refs[`datesHeader${this.currentRoom}`][0]) {
const inst = this.$refs[`datesHeader${this.currentRoom}`][0].osInstance();
if (inst == null) return;
const state = inst.getState();
if (state.hasOverflow.x) {
inst.scroll({ x: 0 });
}
this.updateScrollButtons();
}
});
},
Like that is working fine; The problem is when I tried to identify which scrollbar was moved and how I can update this.currentRoom when scrollbar is moved;
Firsty u have wrong :ref value - should be :ref="`datesHeader-${id}`"
then on onMounted you can add event listners to $refs
onMounted() {
this.$refs['datesHeader-0'].addEventLister('scroll', watchFunc)
}
DOCS:
https://developer.mozilla.org/pl/docs/Web/API/EventTarget/addEventListener
remember to remove event listeners in onBeforeUnmount
also, IntersectionObserver could be good for tracking scroll
DOCS: https://developer.mozilla.org/enUS/docs/Web/API/Intersection_Observer_API
I have a list of elements that are rendered to the view using *ngFor, the number of elements in the list in most cases will exceed the height of the list container element, so overflow: auto being used to make the container scrollable.
Each element in the list represents the occurrence of an event at a specific time in the past, the occurrence time of the event stored in UNIX timestamp format.
On the core layer, there is a BehaviorSubject that starts from the first event timestamp and emits the next value every 100 milliseconds.
Back to the representation layer, there's a subscription of the SubjectBehavroure mentioned above, that does the following on each received new value:
Look for the event in the list, that match the newly received value
If an event is found, it should be activated
<div class="container" id="scroll">
<div
class="list-item"
id="{{ event.timestamp }}"
[ngClass]="{ active: event.active }"
*ngFor="let event of timelineEvents"
>
<div class="event-details text">{{ event.timestamp }}</div>
</div>
</div>
#Component({
selector: 'events',
templateUrl: './events.component.html',
styleUrls: ['./events.component.scss'],
})
export class EventsComponent implements OnInit {
timelineEvents: Array<FsTimeLineEvent> = [];
currentTimeSubscription$: Subscription;
startTimestamp: number;
constructor(private eventFacade: eventFacade) {}
ngOnInit(): void {
this.currentTimeSubscription$ = this.eventFacade.currentTime$.subscribe(
(currentTime) => {
// get current timestamp value
let currentTimestamp = currentTime + this.startTimestamp;
// look for an event
let currentEventIndex = this.timelineEvents.findIndex(
(x) => x.timestamp >= currentTimestamp
);
// set the event to active
this.setActiveEvent(currentEventIndex);
}
);
}
setActiveEvent(index) {
this.timelineEvents.forEach((eve) => {
eve.active = false;
});
let currentEvent = this.timelineEvents[index];
currentEvent.active = true;
let itemToScrollToView = document.getElementById(
`${currentEvent.timestamp}`
);
if (itemToScrollToView)
itemToScrollToView.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}
}
How the event is activated?
Adding special CSS to it, simple border.
Scroll the event HTML Element into the center of the list container HTML element
The logic is working as expected, but only with scroll behavior set to 'auto'
let activeElement: HTMLElement = docment.getElementById(`${id}`)
activeElement.scrollIntoView({ behavior: 'auto', block: 'center' })
What I would love to achieve is smooth easy scrolling, I've tried to change the behavior of the scroll to 'smooth' but that disables the scrolling at all. Which makes no sense to me at all, like why this is happening?
I've made a ton of researches, I've tried to implement my own custom scrollIntoView function, but I've got nothing! I would appreciate your help! Thanks in advance!
Thanks for your time.
I'm developing a page which has a top Calendar component( which show a week) and below that, a Scroll component which shows information for each one of the days of the week.
This is my page so far:
The problem here is that I need to know what day the scroll is showing to mark it at the calendar, like this example where the user is at day 3 and day 3 is marked at the calendar:
I have seen scroll tracking questions where the solutions are linked to ScrollY and ScrollX position, but in this case I need some info of the DOM element, like id or something, and I don't know if it's possible.
I also have tried onScroll method of the react infinite scroll, but it returns the whole document.
This is the code:
And the console print:
Thank you very much!
You could use the useRef() hook to reference the parent container within the onScroll function passed to the InfiniteScroll component. In that function you could use the parent reference to calculate which element is currently visible (closest to the middle of visible container). Then, pass item's date to a higher order component which is also shared with the calendar component.
Note: you would need to set the scrollableTarget property of the InfiniteScroll (because we want our parent element to be responsible for
scrollbars).
function InfiniteScrollContainer({ setFocusedItem }) {
const container = useRef();
function handleScroll() {
// Calculate which item is currently in the middle of the container
const containerMiddle = container.current.scrollTop + container.current.getBoundingClientRect().height / 2;
const infiniteScrollItems = container.current.children[0].children;
let index = 0;
let itemFound = false;
const itemNo = infiniteScrollItems.length;
while (!itemFound && index < itemNo) {
const item = infiniteScrollItems[i];
const itemTopOffset = item.offsetTop;
const itemBottomOffset = item.getBoundingClientRect().height + itemTopOffset;
if (itemTopOffset < containerMiddle && itemBottomOffset > containerMiddle) {
setFocusedItem(item);
itemFound = true;
}
index += 1;
}
}
useEffect(() => {
handleScroll();
}, [])
/* ... */
return (
<div ref={container} id="container-id">
<InfiniteScroll
<!-- ... -->
scrollableTarget={"container-id"}
onScroll={handleScroll}
>
<!-- ... -->
</InfiniteScroll>
</div>
);
}
I am using React Bootstrap Table and I am trying to add a loading cursor when the user clicks the sort button.
While I am using that specific table, the problem seems more universal in that the DOM is unavailable when the table is sorting so anything I do to the cursor only happens after the table is done sorting. If the table contains a lot of items this can take a few seconds.
Is there any way add a loading cursor before the sorting starts?
Here is what I have tried so far in terms of React-Bootstrap-Table:
stopSortLoading = () => {
if (document.querySelector('.table-container').classList.contains('loading-pointer')) {
document.querySelector('.table-container').classList.toggle("loading-pointer")
}
}
startSortLoading = () => {
if (!document.querySelector('.table-container').classList.contains('loading-pointer')) {
document.querySelector('.table-container').classList.toggle("loading-pointer")
}
}
render() {
const options = {
onSortChange: this.startSortLoading,
afterTableComplete: this.stopSortLoading
};
I have also tried adding an onClick to a parent div i.e.
<div className='table-container' onClick={() => {
if (!document.querySelector('.table-container').classList.contains('loading-pointer')) {
document.querySelector('.table-container').classList.toggle("loading-pointer")
}
}}>
...table code
</div>
Nothing I have tried has any effect until AFTER the table is sorted.
I have a Vue.js component with several elements in it. I want to automatically scroll to the bottom of that element when a method in the component is called.
Basically, do the same as this. However, I haven't found a way to get the element within my component and modify scrollTop
I'm currently using Vue.js 2.0.8.
2022 easy, readable, smooth scrolling ability, & won't hurt your brain... use el.scrollIntoView()
scrollIntoView() has options you can pass it like scrollIntoView({behavior: 'smooth'}) to get smooth scrolling out of the box and does not require any external libraries.
Here is a fiddle.
methods: {
scrollToElement() {
const el = this.$refs.scrollToMe;
if (el) {
// Use el.scrollIntoView() to instantly scroll to the element
el.scrollIntoView({behavior: 'smooth'});
}
}
}
Then if you wanted to scroll to this element on page load you could call this method like this:
mounted() {
this.scrollToElement();
}
Else if you wanted to scroll to it on a button click or some other action you could call it the same way:
<button #click="scrollToElement">scroll to me</button>
The scroll works all the way down to IE 8. The smooth scroll effect does not work out of the box in IE or Safari. If needed there is a polyfill available for this here as #mostafaznv mentioned in the comments.
As I understand, the desired effect you want is to scroll to the end of a list (or scrollable div) when something happens (e.g.: an item is added to the list). If so, you can scroll to the end of a container element (or even the page it self) using only pure JavaScript and the VueJS selectors.
var container = this.$el.querySelector("#container");
container.scrollTop = container.scrollHeight;
I've provided a working example in this fiddle.
Every time a item is added to the list, the list is scrolled to the end to show the new item.
I tried the accepted solution and it didn't work for me. I use the browser debugger and found out the actual height that should be used is the clientHeight BUT you have to put this into the updated() hook for the whole solution to work.
data(){
return {
conversation: [
{
}
]
},
mounted(){
EventBus.$on('msg-ctr--push-msg-in-conversation', textMsg => {
this.conversation.push(textMsg)
// Didn't work doing scroll here
})
},
updated(){ <=== PUT IT HERE !!
var elem = this.$el
elem.scrollTop = elem.clientHeight;
},
Use the ref attribute on the DOM element for reference
<div class="content scrollable" ref="msgContainer">
<!-- content -->
</div>
You need to setup a WATCH
data() {
return {
count: 5
};
},
watch: {
count: function() {
this.$nextTick(function() {
var container = this.$refs.msgContainer;
container.scrollTop = container.scrollHeight + 120;
});
}
}
Ensure you're using proper CSS
.scrollable {
overflow: hidden;
overflow-y: scroll;
height: calc(100vh - 20px);
}
Here is a simple example using ref to scroll to the bottom of a div.
/*
Defined somewhere:
var vueContent = new Vue({
el: '#vue-content',
...
*/
var messageDisplay = vueContent.$refs.messageDisplay;
messageDisplay.scrollTop = messageDisplay.scrollHeight;
<div id='vue-content'>
<div ref='messageDisplay' id='messages'>
<div v-for="message in messages">
{{ message }}
</div>
</div>
</div>
Notice that by putting ref='messageDisplay' in the HTML, you have access to the element through vueContent.$refs.messageDisplay
If you need to support IE11 and (old) Edge, you can use:
scrollToBottom() {
let element = document.getElementById("yourID");
element.scrollIntoView(false);
}
If you don't need to support IE11, the following will work (clearer code):
scrollToBottom() {
let element = document.getElementById("yourID");
element.scrollIntoView({behavior: "smooth", block: "end"});
}
Try vue-chat-scroll:
Install via npm: npm install --save vue-chat-scroll
Import:
import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)
in app.js after window.Vue = require('vue').default;
then use it with :
<ul class="messages" v-chat-scroll>
// your message/chat code...
</ul>
For those that haven't found a working solution above, I believe I have a working one. My specific use case was that I wanted to scroll to the bottom of a specific div - in my case a chatbox - whenever a new message was added to the array.
const container = this.$el.querySelector('#messagesCardContent');
this.$nextTick(() => {
// DOM updated
container.scrollTop = container.scrollHeight;
});
I have to use nextTick as we need to wait for the dom to update from the data change before doing the scroll!
I just put the above code in a watcher for the messages array, like so:
messages: {
handler() {
// this scrolls the messages to the bottom on loading data
const container = this.$el.querySelector('#messagesCard');
this.$nextTick(() => {
// DOM updated
container.scrollTop = container.scrollHeight;
});
},
deep: true,
},
The solution did not work for me but the following code works for me. I am working on dynamic items with class of message-box.
scrollToEnd() {
setTimeout(() => {
this.$el
.getElementsByClassName("message-box")
[
this.$el.getElementsByClassName("message-box").length -
1
].scrollIntoView();
}, 50);
}
Remember to put the method in mounted() not created() and add class message-box to the dynamic item. setTimeout() is essential for this to work. You can refer to https://forum.vuejs.org/t/getelementsbyclassname-and-htmlcollection-within-a-watcher/26478 for more information about this.
This is what worked for me
this.$nextTick(() => {
let scrollHeight = this.$refs.messages.scrollHeight
window.scrollTo(0, scrollHeight)
})
In the related question you posted, we already have a way to achieve that in plain javascript, so we only need to get the js reference to the dom node we want to scroll.
The ref attribute can be used to declare reference to html elements to make them available in vue's component methods.
Or, if the method in the component is a handler for some UI event, and the target is related to the div you want to scroll in space, you can simply pass in the event object along with your wanted arguments, and do the scroll like scroll(event.target.nextSibling).
I had the same need in my app (with complex nested components structure) and I unfortunately did not succeed to make it work.
Finally I used vue-scrollto that works fine !
My solutions without modules:
Template
<div class="scrollable-content" ref="conversations" />
Script
scrollToBottom() {
const container = this.$refs.conversations;
container.scrollTop = container.scrollHeight;
},
scrollToBottom() {
this.$nextTick(function () {
let BoxEl = document.querySelector('#Box');
if(BoxEl)
BoxEl.scrollTop = BoxEl.scrollHeight;
});
}
Agree with Lurein Perera
Just want to add extra info
watch: {
arrayName: {
handler() {
const container = this.$el.querySelector("#idName");
this.$nextTick(() => {
container.scrollTop = container.scrollHeight;
});
},
deep: true,
},
},
Where as:
arrayName = Name of array
idName = The id attribute has to be added to the div where you want the scrollbar to auto-scroll down when arrayName length increases.
scrollToElement() {
const element = this.$refs.abc; // here abc is the ref of the element
if (element) {
el.scrollIntoView({behavior: 'smooth'});
}
}
}
here you need to use ref for the particular div or element which you want make visible on scroll.
if you have a table and you want to locate the last row of the table then you have to use -
element.lastElementChild.scrollIntoView({behaviour:'smooth'})
Here not that if you ware asynchronously adding the element to the table then you have to take care of it. you can test it using setTimeout, if that is making any difference.
e.g.
const element = this.$refs.abc;
if (element) {
setTimeout(() => {
element.lastElementChild.scrollIntoView({behaviour:'smooth'})
}, 1000);
}
}
replace set timeout with your own async logic.
Using Composition API and TypeScript
I set the parameter scrollTop equal to scrollHeightfrom the HTMLDivElment API.
<template>
<div id="container" ref="comments">
Content ...
</div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, watchEffect } from 'vue'
export default defineComponent({
setup() {
const comments: Ref<null | HTMLDivElement> = ref(null)
watchEffect(() => {
if(comments.value) {
comments.value.scrollTop = comments.value.scrollHeight
}
})
return {
comments
}
}
})
</script>