yvescoding / vuescroll Goto Github PK

<template>
    <div id="app">
        <vue-scroll>
            <p v-for="item in 64">yo</p>
        </vue-scroll>
    </div>
</template>

<script>
export default {};
</script>

<style lang="less">
#app {
    height: 50%;
}
</style>

会出现浏览器的滚动条

bar的高度不能设定

When the wrapping container has witdth value in subpixels (eg. 500.25px), then applied gutter to minus right margin does not fully hide native scrollbar, while width values with decimal part above 0.5px work just fine.

Hey,

Just giving this a try, I have it working but I can not get a track to have a color. The bar color I can set, but not the track / rail it sits on.

Code:

vRail: {
          width: '5px',
          pos: 'right',
          railBackground: '#009688',
          railOpacity: 0.5
        },
        vBar: {
          background: '#00bcd4', // cyan
          deltaY: 30,
          keepShow: false,
          opacity: 1
        },

Any ideas?

Thanks
Dave

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.

配置如下：
{ src: '~plugins/vuescroll', ssr: false },
ssr 是false

这个问题是因为服务端与客户端渲染的DOM结构不一样。出现的这个问题是vuescroll没有允许在服务端使用导致的。

但是如果改成true 就会报 window is not defined
因为服务端没有window

谢谢开源.

It too big to me.
Can it be seperated to several parts, then I can import what I want?

我刚刚在我自己的vue-cli里测试了一下
1.rail
2.bar
3.全局设置
这些内容设置完了没有效果,我一开始以为是自己工程问题,然后在codepen上修改之后也没有效果

tips:在线demo网页打不开了,还有想请问下如何在vue-cli里全局设置参数

我用的doc里面codepen的demo，在chrome 61运行，无法触发handle-scroll-complete事件

在用vuescroll之后,element-ui的table控件宽度无法自适应,只要宽度变小,就会出现横向滚动条

Hello, is it possible to get offsetTop of element inside vuescroll? When i trying to get offsetTop, it's always give 0.

官方那个下拉刷新和上拉加载 example 代码.在这个scroll区域，无法滚动内容···只要手指在区域内，不管是否到底还是到顶，一滑就是刷新或者加载，那我加载的内容怎么看呢？

下面这个例子才是正确的需求：https://vuescroll-issue-list-demo-zdizhghthq.now.sh/

这个的demo代码有吗？

Do you know if this can work with Nuxt?

I created a vuescroll.js plugin

import Vue from 'vue'
import vuescroll from 'vuescroll'
Vue.use(vuescroll)

Added that to plugins: [{ src: '~/plugins/vuescroll.js', ssr: false }] in the nuxt.config

But I get the error "window is not defined"

Any ideas?

Thanks

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
@wangyi7099 这个插件怎么注册呢? 你的API里没有提到, 望大佬指点

version：4.5.27

<vue-scroll :ops="msgOps" ref="vs">
     <ul class="msglist">
           <msg-list v-for="(item, idx) in msglist" :key="idx"
                            :item="item"></msg-list>
     </ul>
</vue-scroll>

msglist为动态内容时，initialScrollY 该配置项为100%，偶尔生效，偶尔不生效。
我试着在API scrollTo 中通过vm.$nextTick 设置，依旧不生效。
不知道是不是我这样使用有问题

参数设置：
ops: {
scrollPanel: {
scrollingX: false,// false to diable
scrollingY: true // false to diable
},
}
问题：
scrollingX 设置为false的时候vuescroll-panel的height不应该为calc(100% + 17px)应该是100%

mode: 'slide'的时候，4.5.27修复了display: inline-block的问题，但是又多了个width:-webkit-fit-content，导致class="vuescroll-panel"下面的子元素（div）撑不开

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

Your config

Your Workaround

• Browser:

• Vuescroll Version(Try to update to the latest version may solve your problem):

• OS:

What happened?
When build with webpack, vuescroll may self contained vue in its packed module,this is wrong.
Vuescroll as a plugin for Vue,just should has an install method with Vue as parameter is enough.But I saw import vue from 'vue' in the index.js from the source.For the problem import vue from 'vue' should be removed from the source code and in package.json use
"peerDependencies": { "vue": "^2.5.16" }, instead.

Using a trackpad scrolls the scrollbar unusably fast on a macbook, os x high sierra.

Your config

Your Workaround

• Browser:

• Vuescroll Version(Try to update to the latest version may solve your problem):

• OS:

What happened?
When we pass a percent to scrollTo api, it will eventually convert to numeric value. But the way of calculation is incorrect.
Before:

    var posY = 0.5 * container.scrollHeight; // Wrong
    scrollTo({y: posY});

Now:

   ar posY = 0.5 * (container.scrollHeight - container.clientHeight); // Right
    scrollTo({y: posY});

scrollpanel 只是加个overflow：scroll，能分项加overflow-x,或overflow-y不

Describe your feature, thanks!
我想在我的dojo项目里引用组件，但是define进来并不能很好地使用，控制台报不能找到vue.js错误，我已经引用了vue.js。而且我的vue和vuex都是这样引用的，都运行的很好。
(I want to use this component in my Dojo (based on AMD) project, but I download the vuescroll.js and vuescroll.min.js and define it, but can not use it correctly, it will give me an 404 error, can not find vue.js)

What does this feature solve?
所以能不能提供一个可以在AMD标准下能用的组件啊，谢谢
So, could you please offer a version can be used in AMD project, like vue,min.js, vuex.min.js, they work well in Dojo, thanks.

Hello,

I'm testing out VueScroll for a project I am currently working on to see if it fits. All is well, except I can't seem to find how to auto scroll to bottom of a div on component initialisation.

Is this possible? If yes, how?

Thank you.

This is my config :

      ops: {
        vuescroll: {
          mode: "native"
        },
        scrollPanel: {
          intialScrollY: true,
          intialScrollX: true,
          scrollingX: true,
          scrollingY: true,
          speed: 300
        }
      }

我测试的是竖向滚动条不能拖动

Your config
Default config

Your Workaround
Roll back to previous version

• Browser:
  Chrome Version 67.0.3396.99

• Vuescroll Version(Try to update to the latest version may solve your problem): 4.7.0

• OS: macOS High Sierra 10.13.6

What happened?
Started to get console.warn()

[vuescroll] The options: vRail, hRail, vBar, hBar have been deprecated since v4.7.0,please use corresponing rail/bar instead!

PS. All the demo links and Documentation seems to be dead.

welcome to comment!

There is something wrong about 4.7.1-rc.5 , I'd fix it in next release.

设置了mode: 'slide'后，样式会有问题。

TypeError: Cannot read property 'vuescroll' of undefined

I have a super basic scroll, the only setting I'm applying is:

ops: {
     scrollContent: {
     padding: false
   }
 }

The problem is that it doesn't get rid of the padding.
I can change other settings and see its effects, so I know I'm setting the ops correctly, it just seems the padding setting is being ignored.

环境:chrome55
描述:
鼠标mousedown的时候移动bar,有时候可能移动的不是那么水平或者垂直,导致鼠标小手的图标变成禁止的图标,这时鼠标移动,滚动条不动.然后鼠标mouseup,就可以控制滚动条的移动.体验非常不好,我已经出现过很多次这种操作了.

@wangyi7099 我们项目中的vue是2.2.6版本的, 安装完了vuescroll依赖说是不支持? 这个问题该怎么解决?

Firefox 59, Linux.

Going to the demo page, you can't scroll, and you don't see any scroll coming from Vue-scroll. Works fine in Chromium Linux.

我用<script src=>方式引入你的vuescroll但在HBuider的内置浏览器中总是报错，说
[Web浏览器] "Uncaught TypeError: undefined is not a function" /js/vuescroll.js (632)，同样的代码在chrome 版本 66.0.3343.4（正式版本）上不会出错。我找不到问题是出在哪？可否邮件指点一下？我有需要在HB的内置浏览器通过。

Hi! Thanks for a good plugin, it's realy good.

But I have a problem with horizontal scroll. Me need scroll horizontal content without shift key? Is it possible?

I didn't see a need parameter in the docs

Hi!

Do you have plans type definitions?

Thanks!

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Some .d.ts files would be appreciated.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

An alternative I have considered is writing those files by myself and open a pull request, which is not gonna happen.

Additional context
Add any other context or screenshots about the feature request here.

Actually you can reply to this issue in Chinese if you like.

Tried this in the latest Firefox quantum but the native scrollbar is still visible.

Vue.component("myComponent", { template:



data(){ return { fields: [ {title: "", name:"id", visible: true, callback: "showDetailRow"}], ops: { vuescroll: { mode: "native", refreshEnable: false }, scrollPanel: { padding: true, easing: "easeInQuad", speed: 300, }, vBar: { background: "#000" }, hBar: { background: "#000" } } }, method : { showDetailRow(value){ var icon = this.$refs.vuetable.isVisibleDetailRow(value) ? 'glyphicon glyphicon-minus-sign' : 'glyphicon glyphicon-plus-sign'; return [ '<a class="show-detail-row" style="color: #ec971f;">', '<i class="' + icon + '"></i>', '</a>' ].join(''); }, } })；

showDetailRow 不能被渲染

If there are any technical problems, please comment here.

Hello, is it possible to make scroll detection by max-height?

我在main.js中配置全局无法生效？

是这么写么？

Vue.prototype.$vuescrollConfig = {
  hBar: {
    height: '5px',
    pos: 'bottom',
    background: 'red',
    keepShow: false,
    opacity: 1,
    hover: false
  }
}

https://wangyi7099.github.io/VuescrollDocs/getStarted/zh/usage.html
页面下拉不了,文档看不全

Hello

Looks like there's an issue on Edge. The scroll appears, but the content is not hidden. It overflows.
Works fine on Chrome/Firefox/IE11. 🤔

@wangyi7099 我看API就是改成native像下面这样不就可以了么?? 我这个为什么不好使