theomessin / vue-chat-scroll Goto Github PK

Hello,

I'm using this in a chat app to scroll to the bottom of a div when a new message is received. The problem is if the user has scrolled up within the div (to view older messages), then when they receive a new message it automatically scrolls to the bottom, which is annoying. Could an option be added for it to only scroll down, if the user hasn't scrolled up?

Thanks!

Currently this library is untested. Would like to at least test the directive code (with all configuration cases). Ideally, we'd test the module bundling (s well (we used to have loads of issues with that once upon a time). Testing importing using a <script> tag would also be nice. Would also like to use GitHub Actions to run tests automagically.

Describe the bug
I'm pretty new to vue, sorry.

I've included this in my package.json then in my main.js after importing vue:
import VueChatScroll from "vue-chat-scroll";
Vue.use(VueChatScroll);

In my component I use <ul v-chat-scroll class="mt2">

When I load the page and my ul has enough messages to require scrolling, no scroll happens.

Any tips how to see if it was loaded properly? The only thing I could think of is using v-chat-scroll="true" in the html instead and making sure that property wasn't set in the result (it wasn't). I have the vue chrome devtools addon and poked around some but couldn't see anything.

There's no console logs or errors.

Also - I either Vue.use(VueChatScroll) OR include the script in my index.html, right? I tried including the script as well and nothing still happened. There's no vue js script linked in there though. I used the CDN script since I couldn't figure out how to get /dist/vue-chat-scroll.js to work properly via the "npm serve" server (it would just load my app when I tried to access it)

Thanks!

I am displaying console output to trace logs and would like to use to plugin to scroll to the bottom

However, it doesn't scroll to the bottom. The class output-cmdhas a max-hight set to 300px so there are scrollbars.

    <div>
      <div class='console'>
        <div class='console-inner'>
          <div class='output-cmd' id="cont" v-chat-scroll>
            <pre>
                <code>
                    {{ logarray.join("\n") }}
                </code>
            </pre>
          </div>
        </div>
      </div>
    </div>

After importing vue-chat-scroll, uglifyjs fails in webpack with the following error:

ERROR in js/vendor.3b917c2.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [js/vendor.3b917c2.js:202508,27]

It still runs properly, but it's not able to process it, resulting in huge file sizes.

I have developed a chat app in laravel and vue js with pusher. It's working proper in all browers but internet explorer is not supporting scroll method. I have installed v-chat-scroll library for scrolling.

Below mentioned errors occuring in console
[Vue warn]: Error in directive chat-scroll inserted hook: "TypeError: Object doesn't support property or method 'scroll'"

Object doesn't support property or method 'scroll'

var scrollToBottom = function scrollToBottom(el, smooth) {
el.scroll({
top: el.scrollHeight,
behavior: smooth ? 'smooth' : 'instant'
});

Here is my package.json file

{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"laravel-echo": "^1.4.0",
"pusher-js": "^4.2.2",
"v-toaster": "^1.0.3",
"vue-chat-scroll": "^1.3.3"
}
}

although most modern browsers automatically destroy it, older browsers won't and it will cause a memory leak.
ideally we call removeEventListener on unbind in the directive

Procedure of getting problem in scroll
when i open the chat and scroll up and send the message the scroll stay in the position it was .
result needed .
if we scroll up and if we send the message without scrolling chat to bottom . the chat doen't scroll to the bottom automaticall .
if i switch from one chatroom to another chatroom as well the chat is not scrolling to buttom . it is sticking where is stop scrolled
@theomessin sir , is there any solution for it

hi! I am using vue chat scroll and it works great but on mobile phones the scroll is not smooth. Do you have any idea why and how I can fix this?
Thank you so much in advance!
Celina

Originally posted by @ckubiqum in #44 (comment)

Would rather have documentation as a site of its own (with examples) instead of a single readme.md.

I've noticed what I think is a weird issue to do with images.

I'm using this in a messaging service and have noticed that it'll scroll to the correct location when all messages are text based, but when messages contain images the scroll position is wrong.

I can only assume this is because it's not taking into consideration the height of the images as these are loading when calcs are run?

I used the scroll for a chat.
The chat contains a v-data-table (vuetify), with pagination.
Clicking on the pagination while on the middle of the page, scroll to bottom.
(which I didn't want).
I added a

if (e[0].target.tagName === "BUTTON") {
        return;
      }

inside the scroll directive mutationObserver to deal with it. [be able to interact with an inner element without scrolling].
To specify the issue :
It happens on mouseDown, so the pagination does not take effect, and the page just scroll to bottom.

I guess there might be a better way to handle those kind of things?

Regards,

我再开发聊天功能， 要求进入聊天页就要滚动到底部，聊天内容有图片，语音文字，图片加载的慢，用这个插件就很难滚动到页面底部了

Make the following code work:

// ES5
var Vue = require('vue')
Vue.use(require('vue-chat-scroll'))

my chat routes may change like this - /conversations#/{user_id}
It seems that the scrolling is working fine with a single chat thread.
But when changing the route, scroll bar doesn't go to the bottom.

fyi -- Changing...

var scrollToBottom = function scrollToBottom(el) {
    el.scrollTop = el.scrollHeight;
};

to...

var scrollToBottom = function scrollToBottom(el) {
  el.scroll({
    top: el.scrollHeight,
    behavior: 'smooth'
  });
};

Results in native smooth scrolling in the browser (per https://css-tricks.com/snippets/jquery/smooth-scrolling/).

When i use handlePrepend = true , it was prepending the message but as soon as i move the mouse the message container reached to the buttom of the container .
is there any solution for this @theomessin sir

Describe the bug
Scroller is not scrolling to the bottom when content has images.

To Reproduce
Steps to reproduce the behavior:
Add images(medium / large sizes) into vue-chat-scroll

Expected behavior
Completely scroll to bottom

Screenshots
https://prnt.sc/s07c7s

Additional context
This is probably due to vue-chat-scroll initialised before the images are completely loaded

Hello @theomessin

Thank you for your nice component
Now i am trying to use your component for my chat app.
I want to change style of message inside chat box. In my case,
i want sender and receiver message style are different.
Can you let me know how can i do it ?

Thank you so much

Why do you hide this folder from "npm"? I can't use your plugin with your instructions.
Any help will be appreciated. Thanks

Hello!
Pls tell me how to use vue-chat-scroll with Vuebar?

<template lang="pug">
    div.chat-wrapper
        scroll(id="chat-box" class="messages" v-chat-scroll)
            div(class="chat")
                ul
                    message-bubble(v-for="(msg, index) in messages" :key="index" :sender="msg.personal")
                        img(slot="avatar" :src="msg.avatar")
                        span(slot="date") {{ msg.date }}
                        span(slot="user-name") {{ msg.userName }}
                        p(slot="msg-text") {{ msg.text }}
                    li(style="height: 20px;")


        div.message-box
            input(type="text" class="uk-input" v-model="msgInput" placeholder="Type text...")
            button(class="uk-button uk-button-primary" @click="send") Send
</template>

<script>
import Vue from 'vue'
import MessageBubble from './chat/MessageBubble'
import Scroll from './utils/Scroll'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)
</script>

I get such errors

Property or method "v" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Property or method "chat" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Property or method "scroll" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

if I do so
scroll(id="chat-box" class="messages" v-chat-scroll="{always: true}")
That errors disappear, but automatic scrolling does not work

If I do not use Vuebar then automatic scrolling works well.
What do I need to do to solve my problem?

The scroll component looks like this

<template lang="pug">
    div(v-bar="{useScrollbarPseudo: true}")
        slot
</template>

<script>
import Vue from 'vue'
import Vuebar from 'vuebar'

Vue.use(Vuebar)
export default {
  name: 'scroll'
}
</script>

I have a facebook like chat system. When I open new chat window, it always scroll again the first window. But it works for all chat window if I send message. Another problem is, how can I scroll by default at the bottom of the div without needing to send a new message? Is there any way to apply this scroll programmatically? It seems, scrolling is applied in updated/watch that's why when data changes it runs. I am not sure. :)
Thank you

Hi, thanks for your work on this plugin.

I was wondering if it's possible to have the plugin scroll to bottom on initialization? Picture a chat window that already has many chats. Often times, you want to pick up at the most recent part of conversation. And having to scroll down, or wait for new message to scroll is not ideal. Does that make sense?

Currently the configuration naming is all over the place. Would ideally refactor this to have all values make sense as a group.

Would be nice to re-write this library in Typescript.

Hi theomessin ,
Thanks for the useful vue directive project. I forked your project and modified a little bit to add new feature.
When scroll to the top of element, directive would emit 'scroll-top' event.
This would woks more like a chat box situation.
Here is my jsfiddle demo 、npm package.
It's my first time to fork others project and republish by myself.
If I do something wrong, please let me and I would fix ASPA.
Thanks again.

Please, add new property like enabled that true by default.
For example:

const vChatScroll = {
  bind: (el, binding) => {
    let scrolled = false;

    el.addEventListener('scroll', e => {
      scrolled = el.scrollTop + el.clientHeight + 1 < el.scrollHeight;
    });

    (new MutationObserver(e => {
      let config = binding.value || {};
      let pause = config.always === false && scrolled;
      if(!config.enabled) {
         return;
      }
      if (config.scrollonremoved) {
        if (pause || e[e.length - 1].addedNodes.length != 1 && e[e.length - 1].removedNodes.length != 1) return;
      } else {
        if (pause || e[e.length - 1].addedNodes.length != 1) return;
      }
      scrollToBottom(el, config.smooth);
    })).observe(el, { childList: true, subtree: true });
  },
  inserted: scrollToBottom
};

Hello,

Just another issue I've come across, would it be possible to make the div scroll to the bottom on page load, as I am now showing some older messages.

Thanks.

Describe the bug
When scroll reach to the top @v-chat-scroll-top-reached event must trigger. But its not working

<v-list
v-chat-scroll="{ always: false, smooth: true }"
@v-chat-scroll-top-reached="customMethod"
class="overflow-y-auto"
height="500"

  >

methods: {
customMethod() {
console.log('reach');

},

Describe the bug
If dynamic elements are wrapped by a transition-group element in order to enable custom enter & exit transitions, the directive does not work. When put on the element around the transition-group, it properly scrolls the div down on first open of the page, but fails to register element additions — the scroll to bottom doesn't happen. If put on the transition-group element itself, even with tag set to div, none of the intended functionality works.

I may attempt fixing this in the next days myself, if you're interested, just lemme know!

To Reproduce
Steps to reproduce the behavior:

1. add the directive on a container that wraps a transition-group element containing a dynamic list of elements.

Expected behavior
The directive behaves exactly as without a transition-group.

Describe the bug
My problem and solution are clearly described here: https://stackoverflow.com/questions/50455751/vue-chat-scroll-doesnt-work-with-a-loader

A working demo reproducing the problem: https://jsfiddle.net/StpFlp_DDK/6s0kbtkr/

Why it is matter
In my case, I have a distinct categories for read and unread messages, each having separate container. And when new unread messages arrive, they attached to the unread messages container. Thus, the change in elements count is not detected now and scrolling is not working in this case. I think it is a common practice to split chat messages into categories or groups, not extactly into read and unread, but maybe groupping them by send date, and if new message arrived e.g. not later than 5 minute after last one, it is attached to last group. Or consider groupping by sender. Just look at any modern IM, like Telegram, WhatsApp, etc.. - they all use some or even several types of groupping messages at once.

Works in Chrome though.

Firefox: 62.0.3 (64-bit)
vue: 2.5.17
vue-chat-scroll: 1.3.3

When I load the page, the container is just as big as the total amount of messages in chat, exceeding the viewport. No scrollbar appears. I'm using the readme.md example with { always: false }.

I use:
in mail.js

import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll';
Vue.use(VueChatScroll);

in component:

<div v-chat-scroll="config">
  <div v-for="(comment, key) in comments">
    ...
  </div>
</div>

...
 config: {
  always: true
 }
...

And i have error

[Vue warn]: Failed to resolve directive: chat-scroll 
(found in <Anonymous> - use the "name" option for better debugging messages.)

I would like my chat messages to come in from the bottom of the chat area instead of popping into the top. Is that possible with your lib?

I am getting this error:
TypeError: el.scroll is not a function

Does this plugin require jQuery? If yes, it should by mentoied in readme.

Requires commit messages to conform to conventional commits. All pull requests will point to a release branch (master or next for pre-releases) and should only implement a single feature/patch. These will be rebased and semantic release will take care of running npm run build and publishing the new version.

Describe the bug
See demo link leads to a 404 page

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://github.com/theomessin/vue-chat-scroll'
2. Click on 'See demo'
3. See error 404

Expected behavior
A page with a demo displayed

When I open the component I guess smooth scrolling, even tho it's disabled. When I get other message it is instant but not on load.

I guess it's because in inserted, it doesn't check for the configs.

Thanks !

In the scrollToBottom method, there is a call to el.scroll. When el is an Element, it works fine on Chrome and Firefox but not on Edge.

I'm not sure the root cause of this, but I believe el.scroll should be avoided entirely. Edge throws an error, but I don't see scroll in Element's properties whatsoever: https://developer.mozilla.org/en-US/docs/Web/API/Element

Replacing scroll with a documented method like scrollTop would likely increase compatibility.

I have the following structure

<div class="messages">
   <div class="s-box" v-chat-scroll>
        <v-component v-for="m in messages"/>
   </div>
</div>

.messages {
 display: flex;
 flex: auto;
 flex-direction: column;
}

s-box {
 margin-top: auto;
}

when I use this code, the wrapper's scroll scrolls to the correct position and scroll to a wrong position, its this because of the component used?

Here is my existing code:

I got it from
https://emitter.io/develop/html5-chat/

You can see my improvements(?) at
https://m.PythonLinks.info

I tried to get your version to work, but no luck. The big problem is that I do not understand vue.js, so I do not really know what I am doing.

I guess I will take a few days to read the docs, and figure out which way is up.

Warm Regards
Christopher Lozinski

after install the latest version with npm:

> require('vue-chat-scroll')
{}

I can't get it to work in my project. When I initially load my chatrooms they are empty of messages, then another API call gets the messages and fills up the wrapper div on which v-chat-scroll is applied

I would want it to auto-scroll to the bottom at that point.. but it doesn't happen

How can I fire a "scroll to bottom" after I get the response from my api call ?

It works for me when just using a normal <ul> tag, but if i use <transition-group name="shoutbox" tag="ul"> it doesn't

problem description
I have created a chat where it load only 20 message . and if i scroll to top we will see the load more button which will load more 20 message but it directly reach to the top . how can we stop scrolling the chat to top and make it stay in the current position

Is your feature request related to a problem? Please describe.
When a client is entering my chat, I'm only showing to him the recent messages. If he would like to see now also further messages, then he needs to scroll up to the beginning, where further should be fetched asynchronously.

Describe the solution you'd like
An event would be nice that is automatically triggered when user scrolls up and reaches the top of the scrollbar

I'm using vue with laravel. This is where i include module.

require('./bootstrap');

window.Vue = require('vue');

import VueChatScroll from 'vue-chat-scroll'
import VeeValidate from 'vee-validate'

const config = {
    errorBagName : 'ferrors'
}

Vue.use(VeeValidate,config);
Vue.use(VueChatScroll);

Vue.component('chat-component', require('./components/ChatComponent.vue'));
const app = new Vue({
    el: '#app',

});

In my chat-component i registerer messages component. Message component code with v-chat-scroll setted:

<template>

    <ul class="chat" v-chat-scroll>
        <li v-bind:class="['clearfix', (message.admin) ? 'left' : 'right']"  v-for="message in messages"><span v-bind:class="['chat-img', (message.admin) ? 'pull-left' : 'pull-right']">
                            <img :src="[(message.admin) ? 'http://placehold.it/50/55C1E7/fff&text=U' : 'http://placehold.it/50/FA6F57/fff&text=ME']"   alt="User Avatar" class="img-circle" />
                        </span>
            <div class="chat-body clearfix">
                <div class="header">
                    <strong v-bind:class="['primary-font', (!message.admin) ? 'pull-right' : '']">Jack Sparrow</strong> <small v-bind:class="['text-muted', (message.admin) ? 'pull-right' : '']" v-text="sentOn(message)">
                    <span class="glyphicon glyphicon-time"></span></small>
                </div>
                <p v-text="message.body" v-bind:class="message.admin ? 'pull-left' : 'pull-right' "></p>
            </div>
        </li>

    </ul>

</template>

And it's not working. I can't figure out what am I doing wrong.

Hey, first thanks for this package. I am using for my chat interface and mostly it works great.
A problem I have is when I use a typing indicator(animated bubble). It is shown while messages are coming in but it disappears afterward. I think this change conflicts with your package because the scrolling is wrong now. It scrolls further down that it should be, resulting in some whitespace under the last message. When I move the mouse, then it automatically scrolls up, realizing there is nothing after the last message. Do you know of any solution to get this working for me?

Here are some images explaining my case:

1. Showing typing indicator
   

2. Showing wrong scroll position
   

3. Showing correct scroll position after I move the mouse
   

Is your feature request related to a problem? Please describe.
Last week I've created the pull request for the event @v-chat-scroll-top-reached, which works fine.
When I'm prepending new items to the list, then the position of the scrollbar still remains on top.
Instead the focus should be kept on the previous item that was on top.

Do you have suggestions how we can solve this problem?