Double scrollbar on parallax page

web
mobile

Topic: Double scrollbar on parallax page

teawebsite pro asked 3 years ago

Hi there, I've got a problem with double scrollbar on parallax page. I know it's something about css overflow property but I can't fix. Code is like https://mdbootstrap.com/css/bootstrap-parallax/ and I'm trying to embed this in wordpress environment. Any help will be appreciated.

Marta Szymanska staff pro premium answered 3 years ago

Hi, no one removes your comments. The problem with parallax was solved in 4.4.0 version. Best, Marta

DANY pro commented 3 years ago

We tried with the example in https://mdbootstrap.com/css/bootstrap-parallax/ but the jarallax class does not exist on this licensed version -> MDB_Pro_4.4.0.zip please double check. thank you

Hi teawebsite, can you share mje your code and screen shot? I can't recreate your problem. Regards

teawebsite pro answered 3 years ago

Hi Kamil, here you are: https://pastebin.com/XiXbuhhB https://drive.google.com/file/d/0B5Qm3Qxwnz1fT1JjMWRaX3dFcnM/view?usp=sharing Wordpress installation is a fresh one and nothing special: child theme and one assets folder with all MDB 4.3.1. PRO pack. Thank you for your support. Best regards.
Try adding to an element class that has a scroll property like this overflow: hidden; Please write now everything ok. Can you put your wordpress on the server? Regards

teawebsite pro answered 3 years ago

Hi Kamil, thank you for your support. It's a little more tricky than you suggest, but finally I fixed this by wrapping all with a div with css like this: .main_wrapper{ left: -50px; width: calc(100% + 50px); overflow: hidden; } Hope this can helps someone else. Best regards. P.s.: now everything ok :)

teawebsite pro answered 3 years ago

Oh no, not fixed just overlap the scrollbar.. I can't figure out how to solve this. You can inspect the site at http://avada.altervista.org/parallax/ Just a prototype. Best regards
Add to body overflow: hidden; because you have oferflow: hidden;. In addition, you can add to the html tag. In addition, you can add an overflowto the html tag. Regards

sayed answered 3 years ago

Kamil is right. Please add this code to your css. Hope it will be solve. html { overflow: hidden; } body { overflow: hidden; }

teawebsite pro answered 3 years ago

So, I can't find what Kamil says "oferflow: hidden;" . Can you please specify in wich css and row you found this error?. If I add html { overflow: hidden; } body { overflow: hidden; } footer disappear and in other pages content will be static. In this topic https://mdbootstrap.com/forums/search/parallax+issue/ Marta says "we know this issue, so that’s why we improved our parallax and in next release", so please advise me when it will be fixed. Regards.

Marta Szymanska staff pro premium answered 3 years ago

Hi, Please, for your patience. A new parallax will be added to MDB in the latest update, probably within 30 days. We're waiting for Bootstrap 4 Beta release, because when they'll update Bootstrap, we'll update MDB. Best, Marta

DANY pro answered 3 years ago

Hi, why you remove our comments. we want to know if this is solved in  version 4.4.0,   we try to use but the jarallax class is not in the file,   please respond

Marta Szymanska staff pro premium answered 3 years ago

Hi DANY, are you sure there is not jarallax in MDB Pro package? Please check out "mdb.js" file and you can find there the code for jarallax. If you need more help, don't hesitate to write me. Best, Marta

teawebsite pro answered 3 years ago

Hi there, I've to say a BIG thank to all of you for your hard work and support. Jarallax seems to works as expected and others components I've tested are ok. Keep going on! Cheers.

Marta Szymanska staff pro premium commented 3 years ago

Thanks for these kind words.

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No