scrollTo

CODE-NINJA · March 3, 2021, 8:34pm

Ok, you were right. I don’t know how it happened, but there was really a bug in my code (although everything worked fine for me, when i did some testings).

However, here the fixed code-part one more time…

import wixWindow from 'wix-window';

var scrollDirection
var scrollPosition = 0
var scrollInterval = 50 //The lower the scrollInterval, the more precise will be the scroll-position.

$w.onReady(()=>{setInterval(()=>show_scrollPosition(), scrollInterval);})

function show_scrollPosition() {
    wixWindow.getBoundingRect()
    .then((windowSizeInfo) => {
 let scrollX = windowSizeInfo.scroll.x;                
 let scrollY = windowSizeInfo.scroll.y;               
            console.log(scrollX, scrollY)
 if (scrollPosition !== windowSizeInfo.scroll.y) {
 if (scrollPosition < windowSizeInfo.scroll.y) {
                scrollDirection = "DOWN", console.log(scrollDirection)
            }
 else if (scrollPosition > windowSizeInfo.scroll.y) {
                scrollDirection = "UP", console.log(scrollDirection)
            }
            scrollPosition = windowSizeInfo.scroll.y;
        }
    });
}

And here the link to the fixed (working) page…
https://www.media-junkie.com/show-hide-header

Yes you found the CONSOLE.
Please use the google-chrome-console to test it.

Scroll slowly up and down and take a look onto results.

bablifarm · March 4, 2021, 6:40am

Okay… thanks again!
Will check it and get back to you, asap…

bablifarm · March 7, 2021, 8:01am

Yup, now the code works… I get the console readings as you mentioned.

Though, there are still quite a few errors & warnings showing in the inspect view…

I am trying to use your function (with this corrected code) to make my header behave the way I mentioned earlier… Haven’t figured it out yet.

Might need your help with that code also…

Thanks again!

bablifarm · March 7, 2021, 11:59am

Okay… actually, I got the code to work just the way I wanted!

I was trying to unnecessarily add other code to masterPages.js - when all I needed to do was add my ‘requirement’ into the if-statement of your code (which is already placed in the masterPage.js panel)!

So, this is your code - plus my addition ~

function show_Header() {
    $w("#header1").children.forEach((item, i) => {
        item.expand();
    })
}

function hide_Header() {
    $w("#header1").children.forEach((item, i) => {
        item.collapse();
    })
}

import wixWindow from 'wix-window';

var scrollDirection
var scrollPosition = 0
var scrollInterval = 10

$w.onReady(()=>{setInterval(()=>show_scrollPosition(), scrollInterval);})

function show_scrollPosition() {
    wixWindow.getBoundingRect()
    .then((windowSizeInfo) => {
 let scrollX = windowSizeInfo.scroll.x;                
 let scrollY = windowSizeInfo.scroll.y;               
            console.log(scrollX, scrollY)
 if (scrollPosition !== windowSizeInfo.scroll.y) {
 if (scrollPosition < windowSizeInfo.scroll.y) {
                scrollDirection = "DOWN", console.log(scrollDirection),
                hide_Header() // my addition to your code
            }
 else if (scrollPosition > windowSizeInfo.scroll.y) {
                scrollDirection = "UP", console.log(scrollDirection),
                show_Header() // my addition to your code
            }
            scrollPosition = windowSizeInfo.scroll.y;
        }
    });
}

And everything works as intended…
[You can see the outcome/ effect, by scrolling down - then up - then down again… on this page]

So, problem solved!
THANK YOU SO VERY MUCH!!!

CODE-NINJA · March 7, 2021, 1:11pm

everything is possible.

bablifarm · April 30, 2021, 1:32pm

Hey @russian-dima … Hope you are keeping healthy and safe?!

I am a bit stuck - trying to figure out why your suggested CODE (above) is NOT WORKING ‘WELL’ on my main site ~ https://www.babli.org/about

Although, it’s working FINE on the ‘Test Version’ that I had created ~ BABLI-Test | About Us (wixsite.com)

The ‘problem’, on the main site occurs when you scroll down/up in SMALL INCREMENTS (eg. one roll of mouse wheel/ one press of page down/ one down-arrow press) - then the page seems to constantly oscillate up-down (78 px) - resulting in the header hiding and showing itself REPEATEDLY.

The problem does not occur if you scroll down/up in LARGER INCREMENTS !

I have checked every bit of code - both on the masterPage.js, as well as on the other page codes - and I CAN’T seem to identify the issue.

I have even compared the codes between the test-site and the main-site - and they are identical.

Can you guide me as to how to IDENTIFY the problem?!

Thanks in advance…

CODE-NINJA · May 1, 2021, 4:59pm

@bablifarm
It seems like you have a conflict at this position…

I assume at this position your header collapses and the UP-DOWN-position automatically changes. This causes the jumping loop.

Also look for more code-parts on your site, where you perhaps have code like —> scroll.to

https://www.wix.com/velo/reference/$w/postpage/scrollto

This also could make some troubles.

bablifarm · May 8, 2021, 12:26pm

@russian-dima , thanks for your feedback…

I’m not sure why you think the conflict is at that particular position (between y438 & y519)
The issue is occurring at other positions of the page as well ( any page - and it’s happening at any position, actually)
That’s why I am inclined to think that if there is a code error/ conflict - it must be within the master page.js - since the issue is happening on every page , right?
Yes, I do have a number of ‘scrollTo’ codes, all over the site - there’s only one on the master page - and I have tired disabling that code to see if it corrects the ‘issue’ - but it does not !

Here’s my code for the masterPage.js ~

import wixWindow from 'wix-window';

// START ///scrollTo 'top' footer-button
export function text56_click(event) {
   wixWindow.scrollTo(0, 0, { "scrollAnimation": false })
 }

export function shape31_click(event) {
   wixWindow.scrollTo(0, 0, { "scrollAnimation": false }), show_Header() 
}
// END ///scrollTo 'top' footer-button



// START /// show/hide header on scroll up/down
function show_Header() {
    $w("#header1").children.forEach((item, i) => {
        item.expand();
 })
}

function hide_Header() {
    $w("#header1").children.forEach((item, i) => {
        item.collapse();
 })
}

var scrollDirection
var scrollPosition = 0
var scrollInterval = 500 //The lower the scrollInterval, the more precise will be the scroll-position.

$w.onReady(()=>{setInterval(()=>show_scrollPosition(), scrollInterval);})

function show_scrollPosition() {
    wixWindow.getBoundingRect()
 .then((windowSizeInfo) => {
 let scrollX = windowSizeInfo.scroll.x; 
 let scrollY = windowSizeInfo.scroll.y; 
            console.log(scrollX, scrollY)
 if ((scrollPosition !== windowSizeInfo.scroll.y) && (wixWindow.formFactor !== "Mobile")){
 if (scrollPosition < windowSizeInfo.scroll.y) {
                scrollDirection = "DOWN", console.log(scrollDirection), hide_Header(), $w('#box47').show()
 }
 else if (scrollPosition > windowSizeInfo.scroll.y) {
                scrollDirection = "UP", console.log(scrollDirection), show_Header(), $w('#box47').hide()
 }
            scrollPosition = windowSizeInfo.scroll.y;
 }
 });
}
// END /// show/hide header on scroll up/down

AND THE CONFOUNDING BIT OF THE PROBLEM IS ~

After checking everything I could think of, and still failing to correct the issue, on a hunch I DUPLICATED THE SITE - And the issue is ABSENT in the duplicate site!

I have not made any changes - the main site and the duplicate site are IDENTICAL
And yet, the issue is occurring on the MAIN SITE
While it’s absent on the DUPLICATE SITE

SO, I AM WONDERING - COULD IT BE A ‘BUG’ AT THE WIX END, WITH THE MAIN SITE???

Thanks again for your support!

bablifarm · May 10, 2021, 11:16am

@russian-dima … following my note above - I INTERCHANGED the two sites from dashboard>settings…

So, now :-

The DUPLICATE site is connected to our domain & premium plan (i.e. it is now the ‘main’ site) - https://www.babli.org/home
The ORIGINAL site is now on a free-hosting plan - https://babli-farm.wixsite.com/babli/home
.
And the ERROR has been REVEARSED - i.e. the now-free-hosting one has the error (which is the original site), while the one linked to our domain (duplicate site) does not have the error!
.
While that solves the ‘issue’ - it also means that all ‘products’ / ‘google SEO’ etc customisations are now LOST!

I am still confounded as the WHY this might have happened … Any ideas?

CODE-NINJA · May 11, 2021, 12:30am

@bablifarm

I tried to understand what is causing the error and why a dublicate-site is working without making any changes on it.

Sorry, but i think in this case, i can’t really help you.

If the NEW dublicate-site works for you, then continue with the dublicate.
Perhaps you will have to reconsteuct few things again, but it will work at the end.

My tip–> always save–>
“site-versions” (check-points), then you will always have some points where you can go back (which you can load) if somethings goes completely wrong with your project and you loose control over it.

bablifarm · May 11, 2021, 12:49pm

@russian-dima … thanks for your time and effort!

I do have older versions saved. But lately, I have been doing a lot of experiments on one particular page (the one you helped with earlier) - a ‘Registration Form’.

And if I revert back to earlier versions, then the successful (code) experiments get lost…

So, for now I’ll stick with the duplicate site - which is working fine.

Do you think I should report the issue to Wix/ Velo?
If so, how should I go about that?

Thanks again!
Cheers…

CODE-NINJA · May 11, 2021, 1:14pm

You already know the option —> “website history” ???
You also can use this function to reconstruct older versions of your site…

Perhaps you can try this first.

bablifarm · May 14, 2021, 7:44am

@russian-dima … Yes, I am aware of ‘site history’.

But as I said earlier, if I reset the site with site-history, it takes out the recent/ not-so-recent EXPERIMENTAL CODES that I have successfully added to the site as well.

So, for now, I am going stick with the duplicate site - which is working fine!

Thanks again for your inputs!

sanzharakmatov · November 9, 2022, 2:44pm

Hi I am trying to add this function to the end of my page. Bascially when I send a URL such as (https://www.cityzen.social/?scrollTo=contactForm ), it should open the final section of my site. Can anyone help here?

Topic		Replies	Views
$w("#element").scrollTo() without animation Ask the community	0	174	March 2, 2022
$w("#element").scrollTo() without animation Ask the community code , question	8	1248	April 12, 2022
In-page menu - disable scroll to anchor/jump to item without animation Ask the community code	1	133	March 28, 2024
Stop links to anchors on pages scrolling! Ask the community code	4	103	July 30, 2024
Jump to location instead of using scrollTo Ask the community code , question	4	204	December 6, 2022

scrollTo

Related topics