个人中心
gpt4 book ai didi

css - Opera 中的滚动问题

转载 作者：行者123 更新时间：2023-12-04 15:59:00 25 4
gpt4 key购买 nike

更新:我留下了以下 JavaScript 代码来显示问题如何随着时间的推移而发展，但现在事实证明这并不相关，因为 JavaScript 不是问题。请查看下面的 html/css 代码。

对于具有大菜单的概述页面，我实现了以下功能( most of which I stole from here ):

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    alert(elemBottom);

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

$(document).ready(function(){
 var overview = $('#overview');
 var active = $('#active-item');
 if (!isScrolledIntoView(active))
 {
  $('#overview li.active-parent').each(function(index, value){
   if (!isScrolledIntoView(active)) overview.scrollTo(value);
  });
 }
 if (!isScrolledIntoView(active)) overview.scrollTo(active);
});

这个想法是，每次页面加载后，包含菜单的菜单都会滚动到当前 #active-item 可见的位置。最好滚动到其第一个父级(菜单项位于树中)，否则滚动到元素本身。

现在这在 Firefox 和 Chrome 中工作得很好(没有一个苹果人向我提示过)，但是 Opera 做了一件非常奇怪的事情:它向下滚动到正确的元素，然后在滚动所有元素之前短暂暂停再次上升

有谁知道吗

  1. 发生了什么事，以及
  2. 我怎样才能阻止它？

谢谢

更新:我正在 Linux (Fedora) 上使用版本 10.63 进行测试

更新:看来我的搜索方向完全错误。该问题似乎是 css 问题，可以使用以下代码复制:

<html>

<head>

<title>Opera scroll test</title>

  <style>
    .main:after
    {
      content: 'abc';
    }

    :focus
    {
      padding: 0px;
    }

    #overview
    {
      display: block;
      float: left;
      width: 219px;
      height: 500px;
      overflow: auto;

    }
  </style>

</head>

<body>

  <div id="main" class="main">

    <div id="overview">
      <ul>
        <?
        for($i = 1; $i < 100; $i++)
          echo '<li>'.$i.'</li>';
        ?>

      </ul>
    </div>
    <div>

      <p>123</p>

    </div>

  </div>

</body>
</html>

现在，如果您在导航 Pane 上向下滚动，并将鼠标移动到右侧(在内容 Pane 上方)，导航 Pane 的滚动将重置。

很抱歉浪费了大家的时间来进行 javascript 搜索:(

如果有任何 css 专家知道如何修复它，或者可以简单地解释发生了什么，我将非常感激。

更新:在Windows Opera 10.63上测试了上述代码。同样奇怪的行为也会发生。

更新:已将此作为错误报告给 Opera。不知道会发生什么......

最佳答案

不确定原因，但问题似乎与 .main:after 直接相关content CSS 设置。你能使用 jQuery 吗？如果是这样，如果您注释掉或删除 .main:after CSS 设置并将其替换为 <head> 中的以下脚本标记您会得到相同的视觉结果，而不会出现奇怪的滚动问题:

<script type="text/javascript">
  $(document).ready(function(){
    $(".main").append("abc");
  });
</script>

关于css - Opera 中的滚动问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4021848/

25 4 0
文章推荐： sql - 在 PL/SQL 过程中提交后找不到数据？
文章推荐： binary - 无法执行二进制文件
文章推荐： windows-phone-8-emulator - 运行 windows phone8 应用程序部署失败
文章推荐： imap - 缺少 CR - TCP 采样器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com