scrolltop() is not work smoothly in chrome & safari but work in firefox

Question 1

Question by sandeep

If you check this link http://jsfiddle.net/Hbkdt/.

$(window).scroll(function() {
       $(".fixed").css("top", $(window).scrollTop() + "px");
    });

Move your scroller downward. Then you can saw the .fixed DIV work smoothly in FF but it’s not work smoothly in Safari & Webkit.

I don’t know how can i fix it. Any help is appreciated 🙂

I am using Chrome Version 22.0.1229.94 in mac.

Answer

Answer by Starx

Starx

I am suggesting an alternative. The most favorable option to give to the smooth effect is to animate the change in position, to fake the easing.

Something like this

$(window).scroll(function(){
    $(".fixed").stop(false, true).animate({ "top" : $(window).scrollTop()}, 1000); 
});

Demo

This works great but when you starting scrolling with the scroll pane it starts stammering again.

But, to overcome this, you can use of debouncing techniques.

$(window).scroll(function(){
    $.doTimeout( 'scroll', 250, function(){
                         // ^ This time prevents the following code to run, 
                         //   if another scrolling occurs within this time

                         //   Thus enabling us to give a smooth scroll effect
                         //   Once the user is done scroll

        $(".fixed").stop(false, true) //break the queue fast
                   .animate({ "top" : $(window).scrollTop()}, 200);
    });
});

Demo

Question 2

Question by Dustin McGrew

Dustin McGrew

What I’m trying to do is a little hard to explain. I want to have a “panel” that would be 100% of the window height and is overlaid on top of the main content of the website. What I want to happen is to have the main website content locked to the top of the browser window and have this “panel” over top of it. This part is easy just using z-index. The problem I’m having is getting the main content of the site to stay fixed at the top of the browser window and when the user scrolls down only the “panel” slides up to reveal the main part of the website below it. Once the panel has cleared the top of the browser window I want the main part of the site to scroll as usual. I would like this to be driven by jQuery.

Here’s the HTML I have:

This is an overlay that needs to slide over top of the main content when the user scrolls down.

This is the main content of the website.

And some CSS:

html, body {height:100%;}

.panel {height:100%; background-color: rgba(186,85,85,0.38); position: relative; z-index:1;}

.main {position: absolute; top:0px; min-height: 1500px;}

EDIT: Think of this effect like a curtain rising on a stage. The stage stays in place while the curtain rises.

Answer

Answer by Starx

Starx

Viewing this problem from overly simple point of view, using position: fixed can fix the main content website while others scroll.

Question 3

Question by preahkumpii

preahkumpii

I am sure my issue is a result of my inexperience in jquery and javascript. I am trying to use an autoscroll jquery plugin. I just stares at me when I click the link that is supposed to activate the scroll. Can someone help? Here is what I have:
I have called the relevant scripts in the head tag.
In at the end of my body tag I have this:

<script type="text/javascript">
$(document).ready(function() {
$("a.hello").click(function () {
    $("#text").autoscroll("toggle", { 
        start: { 
            step: 50, 
            scroll: true, 
            direction: "down", 
            pauseOnHover: true 
        }, 
        delay: 5000, 
        ffrw: { 
            speed: "fast", 
            step: 100 
        } 
    });
});
});
</script>

Then, I am trying to fire the script using an anchor, like this:

<a href="#" class="hello">start/stop</a>

The id of the div that I want to ‘pause on hover’ is “text”.
The source and instructions of this plugin is found here. Thanks.

EDIT:
The function that calls some html from other files based on form selects and puts it into the <div id="text"></div>.

function clickMe() {
    var book = document.getElementById("book").value;
    var chapter = document.getElementById("chapter").value;
    var myFile = "'files/" + book + chapter + ".html'";
    $('#text').load(myFile + '#source')
}

Answer

Answer by Starx

Starx

You forgot to wrap the code inside a

$(document).ready(function() {
..
});

Question 4

Question by frequent

frequent

I’m trying to use the Overthrow Plugin, which is a polyfill for overflow:auto on mobile devices. Sample here.

My question:
How can I detect scrollstart/scrollstop on a div.element that is scrollable? Is this possible at all, or do the scroll/scrollstart/scrollstop events only work on $(document)?

Specifically, if I have two panels on my page, which both are scrollable, is there any way to make this work:

 $(document).on('scrollstart','div:jqmData(panel="main"), div:jqmData(panel="menu")'), function() {
    console.log("scroll detected");
    });

Thanks for some inputs!

EDIT:
My HTML looks like this:

<html class="ui-popover-mode">
// OR depending on screen size
<html class="ui-splitview-mode">
   // panel 1
   <div data-panel="main" class="ui-panel">
       <div data-role="page" class="ui-page" id="mainOne">
           <div data-role="content" class="ui-content"></div>
       </div>
       <div data-role="page" class="ui-page" id="mainTwo">
           <div data-role="content" class="ui-content"></div>
       </div>
   </div>
   // panel 2
   <div data-panel="menu" class="ui-panel">
       <div data-role="page" class="ui-page" id="menuOne">
           <div data-role="content" class="ui-content"></div>
       </div>
       <div data-role="page" class="ui-page" id="menuTwo">
           <div data-role="content" class="ui-content"></div>
       </div>
   </div>
   // panel 3
   <div data-panel="pop" class="ui-panel">
       <div data-role="page" class="ui-page" id="popOne">
           <div data-role="content" class="ui-content"></div>
       </div>
       <div data-role="page" class="ui-page" id="popTwo">
           <div data-role="content" class="ui-content"></div>
       </div>
   </div>
</html>

Screen Mode is set depending on screen size. In every panel there can be multiple pages, which each have a content section, which is scrollable using overthrow.

I want to bind to scrollstart in main and menu content section in splitview-mode AND main content sections in popover-mode.

Originally my selector tried to capture this and only attach to the relevant content elements:

$(document).on('scrollstart','.ui-splitview-mode div:jqmData(panel="main") .ui-content,  .ui-splitview-mode div:jqmData(panel="menu") .ui-content, .ui-popover-mode div:jqmData(panel="main") .ui-content, ', function() {
        // do sth
    });

Agreed this is complex and did not work. But it attached events only to the necessary elements. Now I’m doing like this:

$('.ui-content').on('scrollstart', function() {
        // check here if .ui-content is on the correct panel
    });

So I now have a lot of unnecessary bindings and only check if the binding is correct after the event is detected vs. the other way I would only attach the event to the required elements.

That’s what I was wondering.

Answer

Answer by Starx

Starx

You can directly select the element and attach the scroll event. Simple example

$("#selector").on('scrollstart', function() {
    //...do stuff
});

Question 5

Question by tillda

tillda

When I want to scroll a website by javascript code what is the corrent element to set the .scrollTop property on?

Is it window, document, document.body or html element?

Does jQuery have some trick to detect the intention to scroll the main viewport and unify the calls? It seems to me that sometimes $(window).scroolTop(value) works, but sometimes it doesn’t.

Answer

Answer by bobince

bobince

Normally, the <html> element, aka document.documentElement. However if you are using Quirks Mode, <body> (document.body) represents the viewport instead. (HTML/CSS doesn’t explicitly state/require this, but it is how all modern browsers work.)

You don’t ever want to be in Quirks Mode, but if you’re writing a script for inclusion on other people’s pages you will have to deal with it:

var viewport= document.compatMode==='BackCompat'? document.body : document.documentElement;
// do something with viewport.scrollTop

jQuery uses window.scrollTo() instead of setting the scroll properties directly. Either way is pretty much the same in practice. You could argue that using scrollTo is a bit cleaner in that it avoids relying on the viewport being represented by a particular element, but then jQuery still has to use scrollTop/scrollLeft to read the current value of the ‘other’ property anyway, so no big win. You can use pageXOffset/pageYOffset to read the current scroll position without relying on a particular element, but it’s not supported everywhere so you still have to fallback to the scrollTop method.

Sadly none of these properties/methods have been standardised in the past. CSSOM Views finally address this.

Answer

Answer by Starx

Starx

Depends on what you are scrolling, document/Window or a division

Question 6

Question by Skilldrick

Skilldrick

I have a div with overflow:auto and a scroll bar, and I’d like to be able to drag the contents to scroll. I don’t need to be able to select text. Is there an easy way to do this? A jQuery plugin would be good, otherwise plain old JavaScript would be fine.

It seems I haven’t made myself clear enough. There’s a div with a fixed height that I want to scroll. Instead of picking up the scroll bar, I want to click and drag inside the text in the opposite direction. Like on an iPhone. Like in Photoshop when you hold down space and drag.

-------------------
|               | |
|               | |
|               |||
|               | |
|         <----------- click here and drag to scroll.
|               | |
|               | |
-------------------

Answer

Answer by John Hartsock

John Hartsock

Here is a nice implemenation of drag and scroll divs

http://plugins.jquery.com/project/Dragscrollable

Answer

Answer by Starx

Starx

There is plugin in Jquery UI called draggable
through this you can change any element into draggable object

Here is the link for the demo
http://jqueryui.com/demos/draggable/

It is as simple as this

<script type="text/javascript">
$(function() {
    $("#draggable").draggable();
});
</script>

It is also possible to make it scrollable inside a div. Check the demo page

Tag: scrolling

scrolltop() is not work smoothly in chrome & safari but work in firefox

Question by sandeep

Answer by Starx

Demo

Demo

Scroll a 100% height div over top of main content area while scrolling?

Question by Dustin McGrew

Answer by Starx

jquery autoscroll plugin not firing

Question by preahkumpii

Answer by Starx

is it possible to capture scrollstart on an element other than $(document) in Jquery/Javascript?

Question by frequent

Answer by Starx

Correct HTML scrolling element of main viewport (+jQuery)

Question by tillda

Answer by bobince

Answer by Starx

Is there an easy way to do click-and-drag scrolling in text frames?

Question by Skilldrick

Answer by John Hartsock

Answer by Starx

Please fill the form - I will response as fast as I can!