在可滚动元素上使用时的本地滚动问题

共1个回答, 标签: jquery plugins scroll scrollto

我注意到, 如果您使用具有可滚动元素的 LocalScroll 插件, 并且在这些元素中使用滚动, 这种行为有时看起来像有一个 bug。

URL 与问题的例子: http://jsfiddle.net/oms02/s53h7gko/26/

$.localScroll({
    target: '#wrapper',
    axis: 'xy',
        queue:true,
        duration:1000,
        hash:false,
        lazy:true,
    onBefore:function( e, anchor, $target ){
        },
        onAfter:function( anchor, settings ){
        }
});
#wrapper {
  border:3px solid black;
  width:400px;
  height:300px;
  margin: 10px auto 0;
  overflow:hidden;
}

#div1 {
  width:4000px;height:500px;
  overflow-y:auto;overflow-x:auto;
  border:1px solid red;
  margin:5px 0 0 5px;
}

#div2 {
  width:4000px;height:500px;
  overflow-y:auto;overflow-x:auto;
  border:1px solid red;
  margin:5px 0 0 5px;
}

.box {
  float:left;
  border:1px solid green;
  width:200px;height:600px;
}

.box h2 {
  margin:0 auto;
  text-align:center;
}



go to section 2.1

go to section 2.2




      content 1.1


      content 1.2


      content 1.3


      content 1.4


      content 1.5


      content 1.6




      content 2.1


      content 2.2


      content 2.3


      content 2.4


      content 2.5


      content 2.6


场景:

有一个包装器 (小尺寸), 它有两个大的可滚动 divs (一次是在另一个上), 有六个浮动元素, 高度比它们的父母大, 以便用户可以使用滚动。在简历中, "地图" 如下所示:

|1。11。21。31。41。51。6

|2。12。22。32.4 来 2。52。6

步骤:

  1. 点击链接 "转到 2.1 节"。这正确地引导你到那个 div。
  2. 在该部分上滚动, 在单击其他链接之前, 请确保 div#section2.1 不在顶部 (滚动)。在这种情况下, 您将无法看到框的文本。
  3. 点击链接 "转到第 2.2 节": 在第二个移动 (在 y 轴上) 它在整个包装上滚动, 这是错误的, 因为滚动应该发生在 #div2 上。框的文本看起来像隐藏的。如果你在第 2 节的框中滚动, 那么你会看到内容, 但你可以看到插件没有把你带到正确的位置。

我几乎什么都试过了, 但都失败了: 1. 在两个元素之间设置一个空白。2. 在它们之间插入第三个 div (位置相对和较低的 z 索引)。3. 在移动开始前, 将滚动的 div 的位置设置到顶部。

结果总是一样的: 两个 divs 看起来都像他们都碰撞/粉碎

有什么想法吗?提前感谢!

第1个答案

框的文本看起来像隐藏的。如果你在第 2 节的框中滚动, 那么你会看到内容, 但你可以看到插件没有把你带到正确的位置。

我建议使用通知. 序列滚动事件: 在本地滚动后, 您可以检查 div 位置和仅有可能:

$('#wrapper').on('notify.serialScroll', function (e, anchor) {
    < 0)="" {="" $('#wrapper').scrollto($(anchor).parent());="" $(anchor).parent('div').scrolltop(0);="" }="" });="">
$.localScroll({
    target: '#wrapper',
    axis: 'xy',
    queue: true,
    duration: 1,
    hash: false,
    lazy: false
});
$('#wrapper').on('notify.serialScroll', function (e, anchor) {
  < 0)="" {="" $('#wrapper').scrollto($(anchor).parent());="" $(anchor).parent('div').scrolltop(0);="" }="">
#wrapper {
    border: 3px solid black;
    width: 400px;
    height: 300px;
    margin: 10px auto 0;
    overflow: hidden;
}

#div1 {
    width: 4000px;
    height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid red;
    margin: 5px 0 0 5px;
}
#div2 {
    width: 4000px;
    height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid red;
    margin: 5px 0 0 5px;
}
.box {
    float: left;
    border: 1px solid green;
    width: 200px;
    height: 600px;
}

相关问题

动态创建的元素上的事件绑定? 显示前 10 个字符,点击展开 (或悬停) "文件上载" 对话框首次不显示 "单击" 在可滚动元素上使用时的本地滚动问题 最新版本的谷歌 Chrome, 73.0, 网页应用程序的溢出不再起作用