search

mercs600 / vue2-perfect-scrollbar

Vue.js wrapper for perfect scrollbar
https://mercs600.github.io/vue2-perfect-scrollbar/
MIT License
275 stars 43 forks source link

Scroll on the x axis keeps showing up! #52

Closed mehmeteyupoglu closed 2 years ago

mehmeteyupoglu commented 4 years ago

I want to suppress the left-to-right scroll but I guess I have trouble implementing the suppressing it. The demo does not give much info on how to use options inside the component either. Could you make it simpler and display the use of options inside the component?

wildwest-service commented 4 years ago

I think I'm having a similar problem.

When scroll-x is scrolled to the right edge, it extends infinitely without stopping.

mehmeteyupoglu commented 4 years ago

That's an unexpected behavior! Interesting...

HozSensei commented 4 years ago

Same issue here.. the scroll-x is infinite for me. When i reach the end of scroll-x i can scroll more and more :/ Have the same issue with an other scroll component :/

I read somethin about Math.ceil in this function need to be replace but not sure...

function updateGeometry(i)

i.containerWidth = Math.ceil(rect.width);
i.containerHeight = Math.ceil(rect.height);
mercs600 commented 4 years ago

Guys, could you reproduce it on some codesandbox ?

HozSensei commented 4 years ago

OMG ! I finally found the problem and solve it ! Unfortunately, i can't reproduce it on codesandbox... The problem was that the box with class .ps was 1px larger than content due to a border... if i remove the border, i fix the infinity scroll... Hope this will help ! If .ps don't have the same width or i suppose height than content, an infinity scroll appear

Edit: What's the best way to "scrollTo" with the scrollbar?

thongxuan commented 3 years ago

No pull request on this, guys? I encountered the same issue.

radiorz commented 3 years ago

encountered the same issue. are there any example to use vue2-perfect-scrollbar in x- direction?

sethidden commented 3 years ago

Had the same issue as @HozSensei - the parent of <perfect-scrollbar> had a 1px border. I just moved the 1px border from the parent to just perfect-scrollbar itself (<perfect-scrollbar class="someclasswithborderhere">)

Also remember to set up this.$refs.scrollbar.ps.update() in a window.addEventListener('resize') callback - once you have that set up remember that after every CSS change that attempts to fix the issue (eg. fiddling with borders) you probably need to refresh the browser to see if the scrollbar actually disappears.

That's because adjusting css in the devtools and doesn't trigger the 'resize' event - you may've fixed the problem but you just won't see it because you need to rerender the scrollbar with browser refresh

bonilka commented 3 years ago

Bug with infinity extending was fixed in 1.5.1 of perfect-scrollbar https://github.com/mdbootstrap/perfect-scrollbar/releases/tag/1.5.1 Could you update /dist folder with last dependencies?

As temporary solution I reinstall vue2-perfect-scrollbar and replace in my webpack.config.js 

import PerfectScrollbar from 'vue2-perfect-scrollbar';

to 

import PerfectScrollbar from '../node_modules/vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.esm';
mercs600 commented 2 years ago

guys, sorry for the delay. I have upgraded this repository with current perfect-scrollbar version.