Smoth right scroll

**Yann-Erwan Perio** · Jul 23 '05, 11:58 AM

Re: Smoth right scroll

Yaron C. wrote:
[color=blue]
> I would like to keep the location of the buttons while scrolling to
> the right but I can't get a smoth scroll (without flickering of the
> buttons).[/color]

Using onscroll could be used with advantage, but in your case you're
telling the UA to re-position the element as soon as possible - try to
handle the re-positioning more progressively.

<script type="text/javascript">
for(var ii=0,s="";ii++< 100||document.w rite(s);s+=ii);

window.onload=f unction(evt){
if(document.get ElementById && document.body) {
setTimeout(
function(){
var doc=document.co mpatMode &&
document.compat Mode.indexOf("C SS")!=-1 &&
document.docume ntElement || document.body;
var div=document.ge tElementById("B TN1");
var left=0;

return function(){
if(left<doc.scr ollLeft || left>doc.scroll Left)
div.style.paddi ngLeft=
(left+=(doc.scr ollLeft-left)>>2)+"px";

setTimeout(argu ments.callee, 42);
}
}(),
42
);
}
}
</script>

<div id="BTN1">
<input type="button" value="Get">
<input type="button" value="Clear">
</div>

**cyaron@yahoo.com** · Jul 23 '05, 11:58 AM

Re: Smoth right scroll

Thanks !!!

On 6-Jul-2004, Yann-Erwan Perio <y-e.perio@em-lyon.com> wrote:
[color=blue]
> Date: Tue, 06 Jul 2004 00:39:56 +0200
> From: Yann-Erwan Perio <y-e.perio@em-lyon.com>
> Reply-To: y-e.perio@em-lyon.com
> User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a1)
> Gecko/20040520
> X-Accept-Language: en-us, en
> MIME-Version: 1.0
> Newsgroups: comp.lang.javas cript
> Subject: Re: Smoth right scroll
> References: <93f72e59.04070 40412.4995b712@ posting.google. com>
> In-Reply-To: <93f72e59.04070 40412.4995b712@ posting.google. com>
> Content-Type: text/plain; charset=us-ascii; format=flowed
> Content-Transfer-Encoding: 7bit
> Lines: 42
> Message-ID: <40e9d8c5$0$181 09$626a14ce@new s.free.fr>
> Organization: Guest of ProXad - France
> NNTP-Posting-Date: 06 Jul 2004 00:40:05 MEST
> NNTP-Posting-Host: 82.67.202.102
> X-Trace: 1089067205 news2-e.free.fr 18109 82.67.202.102:4 791
> X-Complaints-To: abuse@proxad.ne t
> Path:
> news.012.net.il !seanews2.seabo ne.net!skynet.b e!news.csl-gmbh.net!feed.n ews.tiscali.de! newsfeed.icl.ne t!proxad.net!fe eder2-1.proxad.net!ne ws2-e.free.fr!not-for-mail
> Xref: news.012.net.il comp.lang.javas cript:306100
>
> Yaron C. wrote:
>[color=green]
> > I would like to keep the location of the buttons while scrolling to
> > the right but I can't get a smoth scroll (without flickering of the
> > buttons).[/color]
>
> Using onscroll could be used with advantage, but in your case you're
> telling the UA to re-position the element as soon as possible - try to
> handle the re-positioning more progressively.
>
>
> <script type="text/javascript">
> for(var ii=0,s="";ii++< 100||document.w rite(s);s+=ii);
>
> window.onload=f unction(evt){
> if(document.get ElementById && document.body) {
> setTimeout(
> function(){
> var doc=document.co mpatMode &&
> document.compat Mode.indexOf("C SS")!=-1 &&
> document.docume ntElement || document.body;
> var div=document.ge tElementById("B TN1");
> var left=0;
>
> return function(){
> if(left<doc.scr ollLeft || left>doc.scroll Left)
> div.style.paddi ngLeft=
> (left+=(doc.scr ollLeft-left)>>2)+"px";
>
> setTimeout(argu ments.callee, 42);
> }
> }(),
> 42
> );
> }
> }
> </script>
>
> <div id="BTN1">
> <input type="button" value="Get">
> <input type="button" value="Clear">
> </div>[/color]

rh · Jul 23 '05, 12:00 PM

Re: Smoth right scroll

Yann-Erwan Perio wrote:[color=blue]
> Yaron C. wrote:
>[color=green]
> > I would like to keep the location of the buttons while scrolling to
> > the right but I can't get a smoth scroll (without flickering of the
> > buttons).[/color]
>
> Using onscroll could be used with advantage, but in your case you're
> telling the UA to re-position the element as soon as possible - try to
> handle the re-positioning more progressively.
>[/color]

The following is a conversion of your exemplary code to use onscroll,
which as you noted would be preferential to the continuous timeout
poll to detect scroll operations. Setting parameters to:

hideDuringScrol l = false;
skidDistance = Infinity;

should provide operation that is close to your original, seemingly
with less jitter when oscillating direction of the scroll.
[color=blue]
>
> <script type="text/javascript">
> for(var ii=0,s="";ii++< 100||document.w rite(s);s+=ii);
>[/color]

window.onload=f unction(evt){
doc=document.co mpatMode &&
document.compat Mode.indexOf("C SS")!=-1 &&
document.docume ntElement || document.body;
if(document.get ElementById && document.body) {
div=document.ge tElementById("B TN1");

window.onscroll = function(){
var hideDuringScrol l = true;
var skidDistance = 32;
// hideDuringScrol l = false;
// skidDistance = Infinity;
var redRate = reductionRate = 2;

var left = lastScrollLeft = 0;
var delayBase = 42;
var delayFactor = 3;

var onscroll = function() {
if (lastScrollLeft != doc.scrollLeft) {
if (hideDuringScro ll) div.style.visib ility = "hidden";
window.onscroll = null;
redRate = reductionRate;
setTimeout(argu ments.callee, delayFactor*del ayBase);
}
else {
if (hideDuringScro ll) {
div.style.visib ility = "visible";
if ( Math.abs(doc.sc rollLeft-left) > skidDistance)
left = Math.abs(doc.sc rollLeft-skidDistance);
}
if (doc.scrollLeft-left < 1 << redRate) redRate >> 1;
div.style.paddi ngLeft=
(left+=(doc.scr ollLeft-left) >> redRate)+"px";
if (redRate) setTimeout(argu ments.callee, delayBase);
else {
div.style.paddi ngLeft= doc.scrollLeft+ "px";
window.onscroll = onscroll;
redRate = reductionRate;
}
}
lastScrollLeft = doc.scrollLeft;
}
return onscroll;
}();
}
}
[color=blue]
> </script>
>
> <div id="BTN1">
> <input type="button" value="Get">
> <input type="button" value="Clear">
> </div>[/color]

../rh

**Yep** · Jul 23 '05, 12:05 PM

Re: Smoth right scroll

rh wrote :

Hi,
[color=blue]
> The following is a conversion of your exemplary code to use onscroll,
> which as you noted would be preferential to the continuous timeout
> poll to detect scroll operations.[/color]

Using onscroll would indeed be beneficial since this would permit an
accurate resources' management; your script is a good start, but there
are still things which seem strange to me.
[color=blue]
> should provide operation that is close to your original[/color]

Well yes, but maybe because that same original, you seem to have
adopted a mixed conception, not fully taking advantage of the onscroll
perspective; for instance some style properties are unnecessarily
re-set at times.

Using a "scrolling" flag, adding a logical layer upon the positioning
analysis and eventually using another 'recursive closure' for the
after-scroll positioning, should offer a reasonable implementation for
the "full" conception.
[color=blue]
> doc=document.co mpatMode &&[/color]

Defining "doc" and "div" as this make them global variables, which
cannot really be wanted; it's better to include them into the wrapper.
[color=blue]
> var redRate = reductionRate = 2;[/color]

Quite a dangerous construct, since the scope for the two variables
isn't the same, as per the ECMA algorithms; here "reductionR ate" is
global.
[color=blue]
> (left+=(doc.scr ollLeft-left) >> redRate)+"px";[/color]

This was a sad error in the original script, my bad, the left property
isn't always updated when the shift is too big, this means that the
logic flow can be broken.

Cheers,
Yep.

rh · Jul 23 '05, 12:05 PM

Re: Smoth right scroll

y-e.perio@em-lyon.com (Yep) wrote:
[color=blue]
>...[/color]
[color=blue]
> Using onscroll would indeed be beneficial since this would permit an
> accurate resources' management; your script is a good start, but there
> are still things which seem strange to me.
>[color=green]
> > should provide operation that is close to your original[/color]
>
> Well yes, but maybe because that same original, you seem to have
> adopted a mixed conception, not fully taking advantage of the onscroll
> perspective; for instance some style properties are unnecessarily
> re-set at times.
>
> Using a "scrolling" flag, adding a logical layer upon the positioning
> analysis and eventually using another 'recursive closure' for the
> after-scroll positioning, should offer a reasonable implementation for
> the "full" conception.
>[/color]

That's one of those questions of cost vs. complexity of the code. I
believe the frequency and the costs of the resets in this case
wouldn't justify the additional complexity of the code, even when the
original form of operation was in effect. But you can tell me if I'm
wrong here.

If it's really a problem, I'd be inclined to simply test (style and/or
computedStyle) prior to setting.

I can also understand the argument for coding for generality and the
desire for structural aesthetics.
[color=blue][color=green]
> > doc=document.co mpatMode &&[/color]
>
> Defining "doc" and "div" as this make them global variables, which
> cannot really be wanted; it's better to include them into the wrapper.
>[/color]

During some experimentation I'd moved those declarations out, and
failed to restore them correctly. The intention was to leave that part
of your code completely unaltered.
[color=blue][color=green]
> > var redRate = reductionRate = 2;[/color]
>
> Quite a dangerous construct, since the scope for the two variables
> isn't the same, as per the ECMA algorithms; here "reductionR ate" is
> global.
>[/color]

Thanks for the wake-up. It's a shortcut that should be used when
initializing globals only (if then?!). That line would perhaps better
read:

var reductionRate = 2, redRate = reductionRate;
[color=blue][color=green]
> > (left+=(doc.scr ollLeft-left) >> redRate)+"px";[/color]
>
> This was a sad error in the original script, my bad, the left property
> isn't always updated when the shift is too big, this means that the
> logic flow can be broken.
>[/color]

Convergence failures were easier to detect with an "onscroll"
implementation. :)

A couple of further notes:

I probably should have replaced "arguments.call ee" with "onscroll" in
the calls to setTimeout, just to help clarify the code, now that the
function is no longer anonymous.

It seems the line:

div.style.paddi ngLeft= doc.scrollLeft+ "px";

is redundant and should be deleted (possibly one of the "strange"
things you were wondering about).

Regards,

../rh

rh · Jul 23 '05, 12:06 PM

Re: Smoth right scroll

codeHanger@yaho o.ca (rh) wrote in message news:<290e65a0. 0407072102.4895 173e@posting.go ogle.com>...[color=blue]
> y-e.perio@em-lyon.com (Yep) wrote:
>[color=green]
> >...[/color]
>[color=green]
> > Using onscroll would indeed be beneficial since this would permit an
> > accurate resources' management; your script is a good start, but there
> > are still things which seem strange to me.
> >[/color][/color]

The following has a some fixes that, amongst other things, remove some
of the things that may have seemed strange (OK, were strange ;)). This
should be a little closer to the mark:

window.onload=f unction(evt){
var doc=document.co mpatMode &&
document.compat Mode.indexOf("C SS")!=-1 &&
document.docume ntElement || document.body;
if(document.get ElementById && document.body) {
var div=document.ge tElementById("B TN1");

var onScrollInit = function(){
var hideDuringScrol l = true ;
var skidDistance = 48;
var reductionRate = 2;
var left = doc.scrollLeft, lastScrollLeft = left;
var delayBase = 42;
var delayFactor = 5;
var setVis = true;

var onscroll = function() {
if (lastScrollLeft != doc.scrollLeft) {
window.onscroll = null;
if (hideDuringScro ll) {
div.style.visib ility = "hidden";
setVis = true;
}
setTimeout(onsc roll, delayFactor*del ayBase);
}
else {
if (hideDuringScro ll && setVis) {
div.style.visib ility = "visible";
setVis = false;
if ( Math.abs(doc.sc rollLeft-left) > skidDistance)
left = Math.abs(doc.sc rollLeft-skidDistance);
}
if (Math.abs(doc.s crollLeft-left) < 1 << reductionRate)
reductionRate >>= 1;
div.style.paddi ngLeft=
(left+=(doc.scr ollLeft-left) >> reductionRate)+ "px";
if (reductionRate) setTimeout(onsc roll, delayBase*1);
else window.onscroll = onScrollInit();
}
lastScrollLeft = doc.scrollLeft;
}
return onscroll;
}
window.onscroll = onScrollInit();
}
}

../rh

**Yep** · Jul 23 '05, 12:07 PM

Re: Smoth right scroll

rh wrote :

(sorry for the delayed answer, rh)
[color=blue]
> The following has a some fixes that, amongst other things, remove some
> of the things that may have seemed strange (OK, were strange ;)). This
> should be a little closer to the mark:[/color]

Your script was already very good, it's even better now:-)

[About code complexity]
[color=blue]
> if (lastScrollLeft != doc.scrollLeft) {[/color]

There comes the discussion about code complexity and cost that you
were mentioning before; there's no definite solution of course and
this can be a difficult choice, especially when the original
conception is strong; personally I tend to prefer code complexity over
cost of doing so, especially in environments as unstable as browsers,
but that's my way of coding.

To me, a good program can be defined as fulfilling the customer needs,
efficiently, flexibly and solidly (strong error-catching system).
However, this makes the program good, not more, that's just the basics
you could say. The real thing, to me, is aesthetic, when a program can
expose a beautiful flow to the reader. Striving for aesthetic is one
of the biggest quality for a programmer IMHO (with the ability to take
one's time in imagining the program, and of course common qualities
like analytical and logical skills, good memory and curiosity).

However in the current script there shouldn't be any hesitation,
testing window.onscroll would probably be a good thing:-)

I also think that you could remove the hideDuringScrol l and setVis
parameters and hide automatically; there's no real added value in not
hiding during the scroll if you just move the object when the scroll
has stopped.

[About var a=b="foo"]

As you've said, this should be used only in global context; however in
most conceptions using too many global variables just keeps polluting
the global namespace, so such constructs are very unlikely to appear
in advanced scripts. Now, "a=b='foo'" can be used effectively, if the
variables have been defined on the correct scope beforehand.

BTW, IIRC it's the first time I've seen you using a closure-based
style with your scripts; what are your impressions on this matter?

Regards,
Yep.

rh · Jul 23 '05, 12:08 PM

Re: Smoth right scroll

y-e.perio@em-lyon.com (Yep) wrote:[color=blue]
> rh wrote :
>
> (sorry for the delayed answer, rh)[/color]
(as if I'm always timely :))[color=blue]
>[/color]
[color=blue]
> Your script was already very good, it's even better now:-)
>[/color]

Thanks for the positive feedback!
[color=blue]
>
> [About code complexity]
>[color=green]
> > if (lastScrollLeft != doc.scrollLeft) {[/color]
>
> There comes the discussion about code complexity and cost that you
> were mentioning before; there's no definite solution of course and
> this can be a difficult choice, especially when the original
> conception is strong; personally I tend to prefer code complexity over
> cost of doing so, especially in environments as unstable as browsers,
> but that's my way of coding.
>
> To me, a good program can be defined as fulfilling the customer needs,
> efficiently, flexibly and solidly (strong error-catching system).
> However, this makes the program good, not more, that's just the basics
> you could say. The real thing, to me, is aesthetic, when a program can
> expose a beautiful flow to the reader. Striving for aesthetic is one
> of the biggest quality for a programmer IMHO (with the ability to take
> one's time in imagining the program, and of course common qualities
> like analytical and logical skills, good memory and curiosity).
>[/color]

Yes, there can be endless debate about this aspect of programming (and
there has been a certain amount recently in this forum). Fully
understanding a problem, and the tools that are available to solve it,
will often lead to the most elegant solution. There are also times,
through this virtue, when the most elegant solution may be the most
difficult for others, perhaps not as well versed, to understand.

Regardless, I think we all aspire to the "best solution" using the
"best practises" that can be acheived within the time that can be
allotted to the process. There's no question that your way is to be
admired.
[color=blue]
> However in the current script there shouldn't be any hesitation,
> testing window.onscroll would probably be a good thing:-)
>
> I also think that you could remove the hideDuringScrol l and setVis
> parameters and hide automatically; there's no real added value in not
> hiding during the scroll if you just move the object when the scroll
> has stopped.
>[/color]

Agreed, the ability to set hideDuringScrol l was included for no
purpose other than to emulate the behaviour of your original.

I tend not to use switches if they can be avoided. However,
eliminating setVis relates to whether you wish to tolerate unecessary
settings of the style visibility, since the value of window.onscroll
is insufficient to make the determination (i.e., it's desirable to set
the visibility once when beginning to show the motion, even though the
onscroll setting remains null throughout the animation).

(I found that setting the visibility is highly efficient in some
prominent browsers and highly inefficient in others. What else would
we expect?)

See below (if you're not getting too bored by now :)) for a final
version that minimizes setting of visibility, and allows both
horizontal and vertical scroll placement of a div with absolute (0,0)
positioning.
[color=blue]
>
> [About var a=b="foo"]
>
> As you've said, this should be used only in global context; however in
> most conceptions using too many global variables just keeps polluting
> the global namespace, so such constructs are very unlikely to appear
> in advanced scripts. Now, "a=b='foo'" can be used effectively, if the
> variables have been defined on the correct scope beforehand.
>[/color]

That relates to some extent to my "(if ever?!)" comment, regarding
use. I too am a general anti-globalist (and often cringe a bit when I
see suggestions like "what you have to is set a global variable." in
clj), and share your concern regarding overuse of this namespace.
[color=blue]
>
> BTW, IIRC it's the first time I've seen you using a closure-based
> style with your scripts; what are your impressions on this matter?
>[/color]

If one is writing relatively small snippets of code, it doesn't all
that often lend itself to introducing closures. However, the use
setTimeout almost always seems to be a natural lead-in to creation of
a closure.

I'm highly impressed with closures, and try to make use of them
whenever it seems appropriate to do so.

Regards,
../rh

window.onload=f unction(evt){
var doc=document.co mpatMode &&
document.compat Mode.indexOf("C SS")!=-1 &&
document.docume ntElement || document.body;
if(document.get ElementById && document.body) {
var div=document.ge tElementById("B TN1");

var onScrollInit = function(){
var skidDistance = 75;
var leftReductionRa te = 2, topReductionRat e = leftReductionRa te;
var left = doc.scrollLeft, lastScrollLeft = left;
var top = doc.scrollTop, lastScrollTop = top;
var delayBase = 42;
var delayFactor = 3;
var setVis = false;

var setPos = function(axis, pos, red) {
var scrollPos = doc["scroll"+axis.s ubstr(0,1).toUp perCase()
+axis.substr(1)];
if ( Math.abs(scroll Pos - pos) > skidDistance)
pos = Math.abs(scroll Pos-skidDistance);
if ( Math.abs(scroll Pos - pos) < 1 << red) red >>= 1;
div.style[axis] = ( pos +=(scrollPos - pos) >> red)+"px";
if (axis == "top") { top = pos; topReductionRat e = red; }
else { left = pos; leftReductionRa te = red; }
}

var onscroll = function() {
if (lastScrollLeft != doc.scrollLeft
|| lastScrollTop != doc.scrollTop) {
if (! setVis && (setVis = true))
div.style.visib ility = "hidden";
if (window.onscrol l) window.onscroll = null;
setTimeout(onsc roll, delayFactor*del ayBase);
}
else {
if (setVis && ! (setVis = false))
div.style.visib ility = "visible";
setPos("top", top, topReductionRat e); // conditional call?
setPos("left", left, leftReductionRa te); // " "
if (leftReductionR ate
|| topReductionRat e) setTimeout(onsc roll, delayBase);
else window.onscroll = onScrollInit();
}
lastScrollLeft = doc.scrollLeft;
lastScrollTop = doc.scrollTop;
}
return onscroll;
}
window.onscroll = onScrollInit();
}
}

Smoth right scroll

Smoth right scroll

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment