Fork me on GitHub
#reagent
<
2019-05-31
>
coby21:05:40

I have a modal popup that needs to be scrollable, and I want to prevent scrolling through the main html elem when it's open. Would the best way to accomplish this be a callback ref on the trigger elements (i.e. open/close buttons), which sets the html's style directly?

RafaMedina21:05:05

@ctamayo the state with a "class" toggable?

coby21:05:44

what I'm asking is where in my code I would go about mutating the DOM, whether that's toggling a class, setting a style, or whatever. Reagent is reaching outside of the component, all the way up to the html element, so this isn't something being rendered by hiccup.

RafaMedina21:05:21

Well.. I'm new in this stuff but i'd try to set the html { overflow-y: hidden; }, and in your main component add a main [:div] will handle the overflow auto.. , so you can manage now that div with the state

coby22:05:41

yes, the issue of how to handle scrolling and how to render the modal div is all taken care of. I'm asking specifically about where in the code I should set overflow: hidden. In the click handler for each trigger element?

RafaMedina22:05:33

Yes, I understand the question, the other solution I think is access directly (without reagent) the element