Crowdfunding Page - SASS, Vue.js

@vinhyan In the Vue.js code, I added a reference (ref='name') to each of the reward input section divs, then when the modal is opened, I call the scrollIntoView() JavaScript function on that reference. Look at the openPledgeModal() function in my code, and look for the associated ref in the source HTML. Clicking a specific button also changes styles and makes the radio button :checked using the v-model pledgeChoice value.

@richardcyrus I see thank you for sharing!

@prathyushSunny Thanks for the feedback. I'm not sure I follow what's happening in your case. This was the first time I used the scrollIntoView behavior. I applied the scroll behavior to the input for each reward amount. My main page does not scroll by default when the modal is active, the modal scrolls (it's still possible to scroll the main page on a tall view port). My modal overlay is position fixed and the modal content scrolls on top of that.

@prathyushSunny Hey! Thought I would share what I know since I've just done the same project.

To stop the main page from scrolling when the modal is open, I made the body element overflow: hidden by creating a class modal-on. Then in JS, I added this class on the body when your modal is open (usually in the same 'click' event callback function) and of course remove modal-on class when the modal is closed to keep the main page scrollable again. Hope it makes sense.

Feel free to check out my work and let me know if you need any help!