tangdaohai / vue-happy-scroll Goto Github PK

Error in nextTick: "TypeError: Cannot read property '0' of undefined"

<happy-scroll resize>
<div>
<div v-for>
item
</div>
</div>
 </happy-scroll>

但是外面像这样再嵌套一层就不报了

比如我想在注册的时候就让滚动条默认resize为true之类的

问题

Hi，@tangdaohai 遇到一个问题，先看下我的 HTML代码结构：

<div class="content-wrapper">
  <div  class="happy-scroll">
    <div class="happy-scroll-container" style="width: 320px;height: 210px;">
     <div class="happy-scroll-content">
      <div id="layers">/* 很长的内容 */</div>
      </div>
    </div>
  </div>
</div>

.content-wrapper容器的高度可以通过一个鼠标上拉改变高度。导致一个问题是，即使 .content-wrapper 高度改变了，但是 div#layers 的高度未变，其原因是 .happy-scroll-container 高度是内联固定值

需求

上拉改变容器高度时，.happy-scroll-container 高度可以自动计算高度决定是否隐藏和显示滚动条

点击滚动条后 滚动区域会按照滚动条的高度进行滚动

现在是只有垂直方向可以用鼠标滚动滚动条，水平的不可以，虽然说也可以通过鼠标滚轮监听实现该功能，监听结束与开始事件，进行横向鼠标滚动

[Vue warn]: Failed to resolve component: happy-scrolly If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

父级容器高度是100vh，缩小浏览器高度，父级容器高度会发生变化。
此时会无法滚动到底部，加了resize也无效

在谷歌浏览器 360浏览器中 加在左侧导航上，显示正确

但是在火狐浏览器中会为整个页面包括左侧导航和右侧主要内容板块一起添加滚动条

我什么都在里面添加，只是引用了这个组件，就显示 Cannot read property '0' of undefined at o.computeStripX (happy-scroll.min.js?b355:1)这个错误。

使用时，按照说明在happy-scroll标签内外都设置了div包裹happy-scroll和滚动内容，但发现有效滚动区域始终为半个字大小。
项目结合element-ui使用，是否element-ui对该组件有影响？

1-可否有一个监测外部窗口resize事件的接口,或者一个参数能从外部触发,

2-与elementUI中tabTabs 标签页这样的插件配合使用,每个tab内容中都会有子滚动区域,只有第一个显示的才会有正确的宽高计算,因为happy-scroll如果内容不变,只在mounted计算一次,导致后面的视图宽高为0,这个问题我加了一个v-if可以解决,

3-插件有兼容问题吗?我写的案例在火狐下的高度计算container层和content层高度全为内容的高度,导致无法滚动,谷歌正常.

在新版本中看到了这个样式以下
.happy-scroll-container .happy-scroll-content{
/* 解决横向滚动差 20px 的问题 */
display: inline-block;
}
设置成inline-block会导致内容没有占满全部宽度

正常情况下：

页面加载后滚动条无法拖动或者手动拉到最底部, 容器里面内容也会展示不全

问题1：版本 2.1.0，无法正常resize。容器高度很小时，也会产生滚动条，而不是隐藏滚动条。之前用版本 2.0.1没有这个问题。

vue-happy-scroll 当浏览器小窗口打开的时候, 页面布置好了,当点击浏览器全屏的时候,这个时候,在vue-happy-scroll中的元素快,并不会跟着缩放,而不在happy-scroll中的元素就缩放了, 用resize 也没效果, 请问,我应该如何解决?

使用element-ui的collapse组件，使用v-if打开关闭后会被遮盖20像素，发现打开关闭后isScrollNotUseSpace元素是undefined。
解决:
scroll.vue文件
331行Vue._happyJS._isScrollNotUseSpace !== undefined改成this.isScrollNotUseSpace !== undefined即可。

v2.0.1 版本，滚动条移动了，但元素并未移动到指定位置。

当内容比较的时候，滚动条很短，而且滚动条在底部

您好作者，我的vue-happy-scroll内部的东西是通过v-for循环出来的。但是在页面上面happy-scroll-container这个元素宽和高却是20px，而且控件的滚动事件也被禁用了。我查了一下，网上说循环的外面需要包裹一层盒子，我试着用一个div把循环的内容包裹起来，但是页面依然还是那样，请问我是哪个地方调用错误了吗

滚动条移动到了最顶端，元素却未移动。

在设置每一条数据的高度固定并且容器高度固定的情况下，动态绑定的数据会导致滚动条会无法滚动到最低端，如果使用静态的数据渲染，滚动条正常触底

加上了resize属性，但是浏览器窗口resize的时候，happy-scroll滚动条还存在？？？
是我配置出错了吗？
请问怎么解决？

大佬可以给滚动条加个背景色吗？类似这种

目前监听到滚动时发生的值，但是不知如何捕获滚到底部的最大值

能否实现点击实现返回scroll顶部的功能

在谷歌浏览器 360浏览器中 加在左侧导航上，显示正确

但是在火狐浏览器中会为整个页面包括左侧导航和右侧主要内容板块一起添加滚动条

组件生成以后如果窗口的大小发生了变化 组件内容滚动区域给了固定宽高，不随页面大小发生变化

现在没有点击滚动的效果么，比如说浏览器的滚动条，点击滚动条下边的空白部分，滚动条会随之滚动到鼠标点击地方

moveY赋值之后，并不会滚动回去

组件外层的div我这边业务需求无法限制死宽度，这样做横向滚动的话，滚动条的宽度不会自适应

As we know, when we set this css property and let the list scroll, the ios will forbid many actions.
So I wanna know whether this plugin can works in ios webview.
thx.

在使用组件的时候，组件父级宽度改变了，但是happy-scroll-container的宽高没有随父级宽高响应，

请问，如何在鼠标移入区域显示滚动条时，不要动画？谢谢

在父级是隐藏的情况下没法初始化vue-happ-scroll?