Home/ Questions/Q 3316116
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T22:25:52+00:00

Update: I left the following javascript code in to show how the problem developed

  • 0

Update: I left the following javascript code in to show how the problem developed over time, but it turns out now this is NOT relevant as javascript is not the issue. Please take a look at the html/css code below.

For an overview page with a large menu, I implemented the following function (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);
});

The idea is that after every page load, the containing the menu is scrolled into a position where the current #active-item is visible. Preferably by scrolling to its first parent (the menu items are in a tree) otherwise to the item itself.

Now this works fine in Firefox and Chrome (and none of the apple people have complained to me), but Opera does a really strange thing: it scrolls down to the correct element, then pauses very briefly before scrolling all the way up again

Does anybody have any idea

  1. What’s going on, and
  2. How can I stop it?

Thanks,

Update: I’m testing with version 10.63 on linux (Fedora)

Update: it appears I was searching in the wrong direction entirely. The issue appears to be a css thing, and can be replicated with the following code: 

<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>

Now if you scroll down on the navigation pane, and the move your mouse to the right (over the content pane) the scroll of the navigation pane is reset.

Sorry for wasting everyone’s time with a javascript hunt 🙁

If there are any css gurus out there who know how to fix it, or who can simply explain what’s going on I’d be very grateful.

Update: tested the above code in windows on opera 10.63. The same strange behaviour occurs.

Update: have reported this to Opera as a bug. Wonder what will happen…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not sure as to the why but the issue seems directly related to the .main:after content CSS setting. Can you use jQuery? If so, if you comment out or remove the .main:after CSS setting and replace it with the following script in your <head> tag you get the same visual result without the weird scrolling issue:

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