# Web SDK Client View Other Page screen does not scroll and the mobile does not work

**URL:** <https://devforum.zoom.us/t/web-sdk-client-view-other-page-screen-does-not-scroll-and-the-mobile-does-not-work/72677>\
**Category:** Web\
**Created:** [July 22, 2022, 1:40am UTC](https://devforum.zoom.us/t/web-sdk-client-view-other-page-screen-does-not-scroll-and-the-mobile-does-not-work/72677 "2022-07-22T01:40:34Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sd30414](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/sd30414/32/39529_2.png) [@sd30414](https://devforum.zoom.us/u/sd30414)\
**Post date:** [July 22, 2022, 1:40am UTC](https://devforum.zoom.us/t/web-sdk-client-view-other-page-screen-does-not-scroll-and-the-mobile-does-not-work/72677/1 "2022-07-22T01:40:34Z")

</div>

I am implementing react app referring to [GitHub - zoom/meetingsdk-react-sample: Use the Zoom Meeting SDK in a React App](https://github.com/zoom/meetingsdk-react-sample).

import ZoomMtg from ‘@zoomus/websdk’; It was confirmed that the mobile web does not apply the moment you do it.

const zoomMeetingSDK = document.getElementById(‘zmmtg-root’)

// To hide  
zoomMeetingSDK.style.display = ‘none’;

The above code doesn’t work either.

For my project, I want to use the Client View only on a specific page of the website, but on all pages.

Because this is applied, the mobile web size does not fit.

Also, other pages do not scroll even on the web (Chrome).

How do I solve it?

---

<div class="post-metadata">

**Author:** ![j.schoenemeyer](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@j.schoenemeyer](https://devforum.zoom.us/u/j.schoenemeyer)\
**Post date:** [July 22, 2022, 7:54am UTC](https://devforum.zoom.us/t/web-sdk-client-view-other-page-screen-does-not-scroll-and-the-mobile-does-not-work/72677/2 "2022-07-22T07:54:23Z")

</div>

> // To hide  
> zoomMeetingSDK.style.display = ‘none’;

append “trace(zoomMeetingSDK )” → result?

I would use css classes (-\> addClass/removeClass) and append a custom class file at the end of the html - they conflict less with original zoom javascript programming

use the DOM debugger of the browser to test/append css rules

> For my project, I want to use the Client View only on a specific page of the website, but on all pages.

use iFrames - but they are official NOT supported, because the ‘Cross-Origin Isolation’ is a bit harder to do

[https://marketplace.zoom.us/docs/sdk/overview/websdk-gallery-view/](https://marketplace.zoom.us/docs/sdk/overview/websdk-gallery-view/)

---

<div class="post-metadata">

**Author:** ![sd30414](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/sd30414/32/39529_2.png) [@sd30414](https://devforum.zoom.us/u/sd30414)\
**Post date:** [July 22, 2022, 8:33am UTC](https://devforum.zoom.us/t/web-sdk-client-view-other-page-screen-does-not-scroll-and-the-mobile-does-not-work/72677/3 "2022-07-22T08:33:50Z")

</div>

const zoomMeetingSDK = document.getElementById(‘zmmtg-root’)  
// To hide  
zoomMeetingSDK.style.display = ‘none’;  
zoomMeetingSDK.classList.add(‘fade-out’);

.fade-out {

}

I’m going to try the addClass you recommended.

I don’t know which attribute to put in css.

sorry… i’m beginner

“trace(zoomMeetingSDK )” result is

> **Summary**
>
> accessKey: “”  
> align: “”  
> ariaAtomic: null  
> ariaAutoComplete: null  
> ariaBusy: null  
> ariaChecked: null  
> ariaColCount: null  
> ariaColIndex: null  
> ariaColSpan: null  
> ariaCurrent: null  
> ariaDescription: null  
> ariaDisabled: null  
> ariaExpanded: null  
> ariaHasPopup: null  
> ariaHidden: null  
> ariaInvalid: null  
> ariaKeyShortcuts: null  
> ariaLabel: null  
> ariaLevel: null  
> ariaLive: null  
> ariaModal: null  
> ariaMultiLine: null  
> ariaMultiSelectable: null  
> ariaOrientation: null  
> ariaPlaceholder: null  
> ariaPosInSet: null  
> ariaPressed: null  
> ariaReadOnly: null  
> ariaRelevant: null  
> ariaRequired: null  
> ariaRoleDescription: null  
> ariaRowCount: null  
> ariaRowIndex: null  
> ariaRowSpan: null  
> ariaSelected: null  
> ariaSetSize: null  
> ariaSort: null  
> ariaValueMax: null  
> ariaValueMin: null  
> ariaValueNow: null  
> ariaValueText: null  
> assignedSlot: null  
> attributeStyleMap: StylePropertyMap {size: 1}  
> attributes: NamedNodeMap {0: id, 1: style, id: id, style: style, length: 2}  
> autocapitalize: “”  
> autofocus: false  
> baseURI: “[http://localhost:3000/](http://localhost:3000/)”  
> childElementCount: 0  
> childNodes: NodeList   
> children: HTMLCollection   
> classList: DOMTokenList [value: ‘’]  
> className: “”  
> clientHeight: 0  
> clientLeft: 0  
> clientTop: 0  
> clientWidth: 0  
> contentEditable: “inherit”  
> dataset: DOMStringMap {}  
> dir: “”  
> draggable: false  
> elementTiming: “”  
> enterKeyHint: “”  
> firstChild: null  
> firstElementChild: null  
> hidden: false  
> id: “zmmtg-root”  
> inert: false  
> innerHTML: “”  
> innerText: “”  
> inputMode: “”  
> isConnected: true  
> isContentEditable: false  
> lang: “”  
> lastChild: null  
> lastElementChild: null  
> localName: “div”  
> namespaceURI: “[XHTML namespace](http://www.w3.org/1999/xhtml)”  
> nextElementSibling: div#aria-notify-area  
> nextSibling: div#aria-notify-area  
> nodeName: “DIV”  
> nodeType: 1  
> nodeValue: null  
> nonce: “”  
> offsetHeight: 0  
> offsetLeft: 0  
> offsetParent: null  
> offsetTop: 0  
> offsetWidth: 0  
> onabort: null  
> onanimationend: null  
> onanimationiteration: null  
> onanimationstart: null  
> onauxclick: null  
> onbeforecopy: null  
> onbeforecut: null  
> onbeforematch: null  
> onbeforepaste: null  
> onbeforexrselect: null  
> onblur: null  
> oncancel: null  
> oncanplay: null  
> oncanplaythrough: null  
> onchange: null  
> onclick: null  
> onclose: null  
> oncontextlost: null  
> oncontextmenu: null  
> oncontextrestored: null  
> oncopy: null  
> oncuechange: null  
> oncut: null  
> ondblclick: null  
> ondrag: null  
> ondragend: null  
> ondragenter: null  
> ondragleave: null  
> ondragover: null  
> ondragstart: null  
> ondrop: null  
> ondurationchange: null  
> onemptied: null  
> onended: null  
> onerror: null  
> onfocus: null  
> onformdata: null  
> onfullscreenchange: null  
> onfullscreenerror: null  
> ongotpointercapture: null  
> oninput: null  
> oninvalid: null  
> onkeydown: null  
> onkeypress: null  
> onkeyup: null  
> onload: null  
> onloadeddata: null  
> onloadedmetadata: null  
> onloadstart: null  
> onlostpointercapture: null  
> onmousedown: null  
> onmouseenter: null  
> onmouseleave: null  
> onmousemove: null  
> onmouseout: null  
> onmouseover: null  
> onmouseup: null  
> onmousewheel: null  
> onpaste: null  
> onpause: null  
> onplay: null  
> onplaying: null  
> onpointercancel: null  
> onpointerdown: null  
> onpointerenter: null  
> onpointerleave: null  
> onpointermove: null  
> onpointerout: null  
> onpointerover: null  
> onpointerrawupdate: null  
> onpointerup: null  
> onprogress: null  
> onratechange: null  
> onreset: null  
> onresize: null  
> onscroll: null  
> onsearch: null  
> onsecuritypolicyviolation: null  
> onseeked: null  
> onseeking: null  
> onselect: null  
> onselectionchange: null  
> onselectstart: null  
> onslotchange: null  
> onstalled: null  
> onsubmit: null  
> onsuspend: null  
> ontimeupdate: null  
> ontoggle: null  
> ontransitioncancel: null  
> ontransitionend: null  
> ontransitionrun: null  
> ontransitionstart: null  
> onvolumechange: null  
> onwaiting: null  
> onwebkitanimationend: null  
> onwebkitanimationiteration: null  
> onwebkitanimationstart: null  
> onwebkitfullscreenchange: null  
> onwebkitfullscreenerror: null  
> onwebkittransitionend: null  
> onwheel: null  
> outerHTML: “\<div id="zmmtg-root" style="display: none;"\>”  
> outerText: “”  
> ownerDocument: document  
> parentElement: body  
> parentNode: body  
> part: DOMTokenList [value: ‘’]  
> prefix: null  
> previousElementSibling: div#root  
> previousSibling: text  
> role: null  
> scrollHeight: 0  
> scrollLeft: 0  
> scrollTop: 0  
> scrollWidth: 0  
> shadowRoot: null  
> slot: “”  
> spellcheck: true  
> style: CSSStyleDeclaration  
> 0: “display”  
> accentColor: “”  
> additiveSymbols: “”  
> alignContent: “”  
> alignItems: “”  
> alignSelf: “”  
> alignmentBaseline: “”  
> all: “”  
> animation: “”  
> animationDelay: “”  
> animationDirection: “”  
> animationDuration: “”  
> animationFillMode: “”  
> animationIterationCount: “”  
> animationName: “”  
> animationPlayState: “”  
> animationTimingFunction: “”  
> appRegion: “”  
> appearance: “”  
> ascentOverride: “”  
> aspectRatio: “”  
> backdropFilter: “”  
> backfaceVisibility: “”  
> background: “”  
> backgroundAttachment: “”  
> backgroundBlendMode: “”  
> backgroundClip: “”  
> backgroundColor: “”  
> backgroundImage: “”  
> backgroundOrigin: “”  
> backgroundPosition: “”  
> backgroundPositionX: “”  
> backgroundPositionY: “”  
> backgroundRepeat: “”  
> backgroundRepeatX: “”  
> backgroundRepeatY: “”  
> backgroundSize: “”  
> basePalette: “”  
> baselineShift: “”  
> blockSize: “”  
> border: “”  
> borderBlock: “”  
> borderBlockColor: “”  
> borderBlockEnd: “”  
> borderBlockEndColor: “”  
> borderBlockEndStyle: “”  
> borderBlockEndWidth: “”  
> borderBlockStart: “”  
> borderBlockStartColor: “”  
> borderBlockStartStyle: “”  
> borderBlockStartWidth: “”  
> borderBlockStyle: “”  
> borderBlockWidth: “”  
> borderBottom: “”  
> borderBottomColor: “”  
> borderBottomLeftRadius: “”  
> borderBottomRightRadius: “”  
> borderBottomStyle: “”  
> borderBottomWidth: “”  
> borderCollapse: “”  
> borderColor: “”  
> borderEndEndRadius: “”  
> borderEndStartRadius: “”  
> borderImage: “”  
> borderImageOutset: “”  
> borderImageRepeat: “”  
> borderImageSlice: “”  
> borderImageSource: “”  
> borderImageWidth: “”  
> borderInline: “”  
> borderInlineColor: “”  
> borderInlineEnd: “”  
> borderInlineEndColor: “”  
> borderInlineEndStyle: “”  
> borderInlineEndWidth: “”  
> borderInlineStart: “”  
> borderInlineStartColor: “”  
> borderInlineStartStyle: “”  
> borderInlineStartWidth: “”  
> borderInlineStyle: “”  
> borderInlineWidth: “”  
> borderLeft: “”  
> borderLeftColor: “”  
> borderLeftStyle: “”  
> borderLeftWidth: “”  
> borderRadius: “”  
> borderRight: “”  
> borderRightColor: “”  
> borderRightStyle: “”  
> borderRightWidth: “”  
> borderSpacing: “”  
> borderStartEndRadius: “”  
> borderStartStartRadius: “”  
> borderStyle: “”  
> borderTop: “”  
> borderTopColor: “”  
> borderTopLeftRadius: “”  
> borderTopRightRadius: “”  
> borderTopStyle: “”  
> borderTopWidth: “”  
> borderWidth: “”  
> bottom: “”  
> boxShadow: “”  
> boxSizing: “”  
> breakAfter: “”  
> breakBefore: “”  
> breakInside: “”  
> bufferedRendering: “”  
> captionSide: “”  
> caretColor: “”  
> clear: “”  
> clip: “”  
> clipPath: “”  
> clipRule: “”  
> color: “”  
> colorInterpolation: “”  
> colorInterpolationFilters: “”  
> colorRendering: “”  
> colorScheme: “”  
> columnCount: “”  
> columnFill: “”  
> columnGap: “”  
> columnRule: “”  
> columnRuleColor: “”  
> columnRuleStyle: “”  
> columnRuleWidth: “”  
> columnSpan: “”  
> columnWidth: “”  
> columns: “”  
> contain: “”  
> containIntrinsicBlockSize: “”  
> containIntrinsicHeight: “”  
> containIntrinsicInlineSize: “”  
> containIntrinsicSize: “”  
> containIntrinsicWidth: “”  
> content: “”  
> contentVisibility: “”  
> counterIncrement: “”  
> counterReset: “”  
> counterSet: “”  
> cursor: “”  
> cx: “”  
> cy: “”  
> d: “”  
> descentOverride: “”  
> direction: “”  
> display: “none”  
> dominantBaseline: “”  
> emptyCells: “”  
> fallback: “”  
> fill: “”  
> fillOpacity: “”  
> fillRule: “”  
> filter: “”  
> flex: “”  
> flexBasis: “”  
> flexDirection: “”  
> flexFlow: “”  
> flexGrow: “”  
> flexShrink: “”  
> flexWrap: “”  
> float: “”  
> floodColor: “”  
> floodOpacity: “”  
> font: “”  
> fontDisplay: “”  
> fontFamily: “”  
> fontFeatureSettings: “”  
> fontKerning: “”  
> fontOpticalSizing: “”  
> fontPalette: “”  
> fontSize: “”  
> fontStretch: “”  
> fontStyle: “”  
> fontSynthesis: “”  
> fontSynthesisSmallCaps: “”  
> fontSynthesisStyle: “”  
> fontSynthesisWeight: “”  
> fontVariant: “”  
> fontVariantCaps: “”  
> fontVariantEastAsian: “”  
> fontVariantLigatures: “”  
> fontVariantNumeric: “”  
> fontVariationSettings: “”  
> fontWeight: “”  
> forcedColorAdjust: “”  
> gap: “”  
> grid: “”  
> gridArea: “”  
> gridAutoColumns: “”  
> gridAutoFlow: “”  
> gridAutoRows: “”  
> gridColumn: “”  
> gridColumnEnd: “”  
> gridColumnGap: “”  
> gridColumnStart: “”  
> gridGap: “”  
> gridRow: “”  
> gridRowEnd: “”  
> gridRowGap: “”  
> (…)  
> tabIndex: -1  
> tagName: “DIV”  
> textContent: “”  
> title: “”  
> translate: true  
> virtualKeyboardPolicy: “”

---

<div class="post-metadata">

**Author:** ![j.schoenemeyer](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@j.schoenemeyer](https://devforum.zoom.us/u/j.schoenemeyer)\
**Post date:** [July 22, 2022, 9:09am UTC](https://devforum.zoom.us/t/web-sdk-client-view-other-page-screen-does-not-scroll-and-the-mobile-does-not-work/72677/4 "2022-07-22T09:09:18Z")

</div>

“zoomMeetingSDK.classList.add(‘fade-out’);”  
=\> classList: DOMTokenList **[value: ‘’]**???

first test it direct in die browser console

```auto
document.getElementById("zmmtg-root")
document.getElementById("zmmtg-root").classList.add("fade-out");
document.getElementById("zmmtg-root")

```

 ![zoom-31](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/3/9/39f830ce395c0e059f399bcfe7f59d2c7add2e39.png)

if that works, you have to implement it into your normal Javascript

note:

> zoomMeetingSDK.style.display = ‘none’;  
> zoomMeetingSDK.classList.add(‘fade-out’);

does not work at the same time, because “display: none” takes effect immediately and “fade-out” then has no effect

Jürgen

---

<div class="post-metadata">

**Author:** ![sd30414](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/sd30414/32/39529_2.png) [@sd30414](https://devforum.zoom.us/u/sd30414)\
**Post date:** [July 22, 2022, 9:34am UTC](https://devforum.zoom.us/t/web-sdk-client-view-other-page-screen-does-not-scroll-and-the-mobile-does-not-work/72677/5 "2022-07-22T09:34:58Z")

</div>

thanks you Jürgen!

I’ll keep trying!

---

<div class="post-metadata">

**Author:** ![j.schoenemeyer](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@j.schoenemeyer](https://devforum.zoom.us/u/j.schoenemeyer)\
**Post date:** [July 22, 2022, 7:38pm UTC](https://devforum.zoom.us/t/web-sdk-client-view-other-page-screen-does-not-scroll-and-the-mobile-does-not-work/72677/6 "2022-07-22T19:38:35Z")

</div>

> [@sd30414](#):
>
> sorry… i’m beginner

zoom integration with react is not an ideal beginner project 🙂

if you are a beginner in **react and zoom** I would recommend to start with the **CDN version** with plain javascript - even that is very demanding for a beginner

> **[GitHub - zoom/meetingsdk-web-sample: Zoom Meeting SDK web sample](https://github.com/zoom/meetingsdk-web-sample)**
>
> Zoom Meeting SDK web sample. Contribute to zoom/meetingsdk-web-sample development by creating an account on GitHub.

Jürgen

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [August 22, 2022, 5:38am UTC](https://devforum.zoom.us/t/web-sdk-client-view-other-page-screen-does-not-scroll-and-the-mobile-does-not-work/72677/7 "2022-08-22T05:38:58Z")

</div>

Closed on August 22, 2022, 5:38am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.