Blocking document.addEventListener (“scroll”, myFunction);

  • Hello.

    Sorry for my english ??

    Faced such problems. On the page where your slider is launched, the JS code stops working for me.

    function myFunction(){
    console.log(“OK”);
    }
    document.addEventListener(“scroll”, myFunction);

    How can you get around this problem? I know that the problem with scrolling has manifested itself more than once in different situations described in this support.But I still haven’t found a solution to my problem.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Small addition. The plugin has been updated to the latest version and does not display any errors in the console.

    Plugin Support Gabor

    (@nextendweb_gabor)

    Hi @andrei84!

    At your slider’s settings -> Controls:
    https://smartslider.helpscoutdocs.com/article/1778-slider-settings-controls
    if you have “Mouse wheel” turned on, then with mouse scrolling you can switch slides and this will block the scroll JavaScript event of the page, to stay at the slider instead of scrolling away from it. But this block only happens if you scroll over our slider and if you would scroll on your page instead, your scroll js event should trigger. If you see a problem on your page outside the slider, please send me a link to where I can see the issue, either here or through our support form:
    https://smartslider3.com/contact-us/support/?topic=Other&platform=WordPress&version=Free&website=website-yes

    At this stage, I’m working on a local server, so I can’t provide a link.

    I have already turned off the setting that you suggested and did not give any result. Cash also cleaned.

    On all pages where there is no slider, the script works without problems. But where there is a slider when scrolling the page, the script does not work.

    Also tried manually posting it before loading the slider js and tried after all the js but the result is the same.

    Plugin Support Gabor

    (@nextendweb_gabor)

    As you see here:
    https://www.dropbox.com/s/r9dhqfhy7sa57v6/scroll.gif?dl=0
    if I use your code on a page with Smart Slider on it, it works for me, so I think the problem will be that your code is not triggered for some reason. Please right click on your page -> choose “Save as” -> put the saved files into a zip file and send it to me to [email protected]

    Google does not skip the archive with the site, so here is the download link – https://www.dropbox.com/s/rm588a45kdzytc6/slider.zip?dl=0

    I made two versions of the page – with and without a slider.
    I tried to run both options myself, errors appear in the console, but they are not related to the operation of the site and they are not present when launched from the server, but this does not change the essence.

    I made the output of the script to the console (text “Ok”). Colortheme.min.js file. On a page with a slider, the script does not work, it works fine without it.

    But what’s interesting. I found a site developed earlier where your slider is used, but not in full width mode, but similar to your slider in the screenshot. Run the script there and it works.

    There was an idea that it might be related to the slider display mode.

    Plugin Support Gabor

    (@nextendweb_gabor)

    The problem happens, because of the combination of 3 CSS codes. In the style.css file on line 21. there is this code:

    body, html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 320px;
    position: relative;
    background: #fff;
}

    so there is a height 100% defined for the body and html elements. Then at the lrm-core-compiled.css file this code is used at line 492.:

    html.html-has-lrm {
    overflow: auto !important;
}

    At the Fullwidth layout:
    https://smartslider.helpscoutdocs.com/article/1776-fullwidth-layout
    because of the “Overflow-X” option we are adding this CSS code using JavaScript to the body tag:

    element.style {
    overflow-x: hidden;
}

    If you remove any of these codes, even just one of them, it will be fine. You don’t really need 100% height for the body, html elements, because this would only be necessary if your content would be so few, that you would need to make sure it touches the bottom, even if there aren’t enough contents on the website. Also since you don’t have a footer, there is nothing really to push to the bottom of the site.

    The overflow auto on the html element is unnecessary, because this creates overflow:scroll, which is what you would get without it too.

    Lastly, we are using overflow-x: hidden; by default, because we are using JavaScript with the “force full width” option to calculate the width of the slider, to go over theme limitations and if this calculation wouldn’t be pixel perfect, we are hiding the vertical scrollbar with this code. But as far as I saw at our users, it was always pixel perfect and this would be probably unnecessary for you too and you could just turn it off.

    • This reply was modified 4 years, 6 months ago by Gabor.
    • This reply was modified 4 years, 6 months ago by Gabor.

    Wow. Didn’t expect that the problem lies in the styles and not in the js.

    I removed height:100% in my styles and everything worked.

    Thank you so much for such prompt help.

    I am planning to buy Pro and your efficiency even in the free version convinces me more and more that I am on the right track.

    Thank.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Blocking document.addEventListener (“scroll”, myFunction);’ is closed to new replies.

Tags