Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Last update introduces a bug on vuescroll-panel #31

Closed
doctorsirius opened this issue May 29, 2018 · 12 comments
Closed

Last update introduces a bug on vuescroll-panel #31

doctorsirius opened this issue May 29, 2018 · 12 comments
Labels
help wanted vue related

Comments

@doctorsirius
Copy link

doctorsirius commented May 29, 2018 •
edited
Loading

On the last update, vuescroll-panel seems to not be set correctly, and the margin-right: -17px, used to hide the browser scollbar and the overflow-y: scroll, don't appear until you hover the panel, you can force the browser scrollbar to appear by refreshing the browser, be sure your mouse cursor is not hovering the panel.

That bug forced me to specify two those properties on my styles in order to fix it.

Chrome version: 61 (I'm using Electron)
OS: Windows
@wangyi7099
Copy link
Member

wangyi7099 commented May 29, 2018 •
edited
Loading

Hi! What's the version of your vuescroll?

@doctorsirius
Copy link
Author

4.5.27

@wangyi7099
Copy link
Member

wangyi7099 commented May 29, 2018 •
edited
Loading

I think this is not the bug of vuescroll, it's Vue's bug instead.
vuescroll shows/hides scrollbars by calculating the size of content and scroll panel in Vue's mounted hook. But in some cases or some browsers, Vuescroll cannot get correct size of content and scroll panel in the mounted hook of vuescroll instance.
See detail in #7707. What the solution for this is to update vuescroll's scrollbar again after some delay times. But it's not ideal after all...

@doctorsirius
Copy link
Author

The thing is I've managed to fix it by setting margin-right: -17px and overflow-y: scroll on the .vuescroll-panel class. So you could test it a bit and introduce that properties without wait to hover. Did you reproduce the bug?

@wangyi7099
Copy link
Member

  1. Update to the latest version.
  2. See the FAQ section in readme.
  3. See my reply above.

@doctorsirius
Copy link
Author

Ok, thanks.

@wangyi7099
Copy link
Member

@doctorsirius
Hi! Do you have the reproduce code for this bug? If there is, I will study into it.

@wangyi7099 wangyi7099 reopened this May 29, 2018
wangyi7099 added a commit that referenced this issue May 31, 2018
@wangyi7099
fix: update bar in setTimeout (#31)
1b4b65d
@wangyi7099
Copy link
Member

wangyi7099 commented May 31, 2018 •
edited
Loading

Refactor some codes for this bug, can have a try again in the next release.

@wangyi7099
Copy link
Member

Try 4.5.32 @doctorsirius

@doctorsirius
Copy link
Author

doctorsirius commented May 31, 2018 •
edited
Loading

Hi! Sorry for the delay, I was busy, many thanks for the updates.

I will try to explain how I had to setup things to deal with some problems with your previous version of your component, sadly I'm not a developer so I can only explain you what I had to do.

  • First, I had a problem with the horizontal scrolling appearing with no reason, that forced my to set scrollOptions: { scrollpanel: { scrollingX: false, scrollingY: true } } on the component I use the scroll. Now, with your last version I've removed it and haven't the horizontal scrolling issue.
  • Second, with the previous update, the one you made on 28th (I think) and having the previous scrollOptions set in the same way, I had to add margin-right: -17px !important and overflow-y: scroll !important to .vuescroll-panel, if not, I got the issue with the native Chrome scrollbar appearing on refresh, until hovering. Now, by removing the scrollOptions stuff there is no need to set .vuescroll-panel, now works.

So, if I use scrollOptions as I described I still get the issue, unless I set the .vuescroll-panel to the properties I told you. I understand that I'm telling the component to make vertical scroll appear, by setting scrollingY to true but that shouldn't be the problem, with that I just telling your component to force scroll to appear, but the component styled scroll, not the Chrome native one, and as I told you it appears just on refresh, the moment you hover the panel the native scrollbar dissappear.

Conclusion: maybe the problem comes when setting scrollOptions, maybe something is not initialized.

For me, now that I can remove those scrollOptions the problems are gone, so for me the issue is fixed, but it will still happen if someone set scrollOptions.

Hope that helps.

@wangyi7099
Copy link
Member

wangyi7099 commented Jun 1, 2018 •
edited
Loading

Thanks for your detailed description! And what you mean is your problem has been solved , but when setting scrollOptions: { scrollpanel: { scrollingX: false, scrollingY: true } } will still appear Chrome native scrollbar, right?

OK, I think it's weird , and I just tested in my local , and set ops to scrollOptions: { scrollpanel: { scrollingX: false, scrollingY: true } } , and it works for me... So, I can not image where the problem is without a reproduce repo or code, so I hope you to make a reproduce code for this , you can put it on GitHub or somewhere else, or a video that records your reproduce behavior
Thanks!

wangyi7099 added a commit that referenced this issue Jun 5, 2018
@wangyi7099
4.6.1 (#35)
a8f25b3 
* refactor: code structure

* tweak: readme

* tweak: demo style

* tweak: readme

* fix: rail's borderradius cannot be dynamiclly set

* tweak: dynamically set data

* fix: internalscrollTop should default to 0

* tweak: the position of preventDefault options in global-config.js

* perf(touch): optimize scroll experience

* tweak: readme

* buid: release 4.5.13

* changelog

* chore: format code with prettier

* tweak: manully add height or width to vuescroll elm  when mounted

* build: release 4.5.14
Feature:
  Add sizeStrategy option for vuescroll  To decide use a numberic size  or
  a percent size for vuescroll while parent dom's size maybe a numberic
  value or a percent value
close #26

* build: release 4.5.15
Hot Fix:
Vuescroll's width and height should default to `100%` in case of getting
an  incorrect size in slide mode .

* tweak: bar/rail width/height default from 5px to  6px

* tweak: readme.md
WIP: refactor unit test module

* tweak: readme
WIP: refactor unit test module

* chore: add unit test

* tweak: ci

* tweak: ci

* tweak: ci

* tweak: ci

* build: release 4.5.16
chore:
add unit test
fix:
window onresize may throw an error

* fix: typo

* fix: rename comonent to component

* tweak: readme

* chore: delete useless files

* tweak: Supplement Readme

* tweak: readme

* tweak: readme

* tweak: readme

* tweak: readme

* tweak: readme

* tweak: readme

* tweak: readme

* tweak: readme

* tweak: readme

* tweak: readme

* tweak: inspired link in readme

* tweak: readme

* tweak: image in readme

* tweak: readme-zh

* tweak: readme

* feat(api): Add scrollIntoView api that allows you scroll an elment into view

* build: 4.5.17

* changelog

* tweak: readme

* tweak

* tweak

* tweak

* tweak

* tweak readme

* update inspire

* fix: get incorrect hash when component mounted

* build: 4.5.18

* changelog

* chore: tweak indent

* fix: incorrect bar position when there is a error of scrollHeight in browser

* chore: fix broken demo link

* chore: strip license ext

* perf(scrollbar): make the position of scrollbar more accurate

* build: 4.5.19

* chore: changelog

* 4.5.20

* fix: update bar when mouse enters or moves

* build: 4.5.21

* changelog

* chore: tweak the intro of vuescroll in readme

* perf(bar): refactor bar and rail

* build: 4.5.22

* chore: changelog

* chore: delete deprecated config

* build: 4.5.23
fix: Vuescroll cannot detect scroll  when parent dom's size is not a fixed value
(#29)

* chore: changelog

* chore: fix typo

* tweaks: readme

* feat(bar): support dragging in mobile

* build: 4.5.24

* chore: changelog

* build: 4.5.25
tweaks:
Wrap `isSupportTouch` by a function to pass ssr exam

* build: 4.5.26
tweaks: Call e.preventDefault when dragging the bar.

* feat(bar): Add showDuration to controll the show time of bars

* fix(silde-mode): what scroll-panel's display style is inline-block  may
disrupt content style (@30)

* fix(silde-mode): what scroll-panel's display style is inline-block  may
disrupt content style (#30)

* buid: 4.5.27

* chore:changelog

* teeaks: changelog

* tweaks: readme

* tweak: readme

* tweak: readme

* fix: typo in createPanel.js

* feat: Support customize svg in pull-refresh or push-load

* build: 4.5.29

* chore: changelog

* chore: changelog

* fix: The content height while push-load is enable

* build:4.5.30

* chore: changelog

* tweak: set 100% when vbar's size is 0

* update issue templates

* fix: add min-width to scrollPanel, scrollContent(#32)

* build: 4.5.31

* chore: changelog

* fix lint

* fix: update bar in setTimeout (#31)

* feat(api): add triggerRefreshOrLoad Api that you can trigger refresh or load directly

* build: 4.5.32

* changelog

* chore: wx.png

* fix typo

* fix: don't call complete while __isDecelerating is false

* feat: add `direction info for event handle`

* build: 4.5.23

* chore: changelog

* tweaks readme

* chore: change website address

* tweak: readme

* chore: tweak shields address

* tweak: readme (#34)

* fix: add z-index to rail

* build: 4.6.0

* chore: changelog

* feat: add border-radius to rail

* 4.6.1
@throrin19
Copy link

Same bug here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted vue related
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@throrin19 @wangyi7099 @doctorsirius