eaglehopes Posted May 12, 2023 Share Posted May 12, 2023 I had three divs having class named "kut"u in another div whose class name is "scroller". I am trying to hide "kutu" objects which are inside "scroller" , whenever their left position is lower than zero. My code is below : <html> <head> <style> body { background-color: lightblue; } .kut { box-sizing :border-box; border-radius : 6px; padding : 10px; margin : 2px; border : 1px solid black; min-width: 200px; max-width: 300px; word-break: break-all; height : 250px; } p { font-family: verdana; font-size: 20px; } .scroller { height : 100px; display: flex; overflow-x: scroll; overflow-y: hidden; } </style> </head> <body> <div id="scroller" class="scroller" onscroll="hideObjects()"> <div id= "1" class="kut">1ENTOEWTEWNTEWNEWTETW</div> <div id= "2" class="kut">2ENTOEWTEWNTEWNEWTETW</div> <div id= "3" class="kut">3ENTOEWTEWNTEWNEWTETW</div> </div> <p id="dbg"></p> <script> var boxes =Array.from( document.getElementsByClassName("kut")); var debug = document.getElementById("dbg"); var container = document.getElementById("scroller"); function hide(item) { var left=item.style.left.replace("px", ""); console.log(item.id+"'s left is"+ item.style.left); // not give correct result ! if(left< 0 ) { item.display = "none"; console.log("closed"); } else { item.display = "block"; console.log("shown"); } } function hideObjects() { boxes.forEach(hide); // when I wrote "boxes.forEach(hide());", it failed!? } </script> </body> </html> Why didn't "style.left" work? I tried to debug its value in console.log(), but it did not work even. Thanks for any advice. Quote Link to comment https://forums.phpfreaks.com/topic/316298-why-doesnt-elements-styleleft-work/ Share on other sites More sharing options...
Solution kicken Posted May 12, 2023 Solution Share Posted May 12, 2023 The .style.* properties only provide values directly assigned to an element, either via JS or via a style="" attribute, they do not reflect CSS applied via selectors. For that, you need to use getComputedStyle. I do not see anything in your current code that is changing the left attribute of your elements, so it'd never change to be zero. Scrolling does not affect the left attribute of an element if that was your intent. If you want to check if something has been scrolled out of view, you need to find the scroll position and compare it to the position of the element. 1 Quote Link to comment https://forums.phpfreaks.com/topic/316298-why-doesnt-elements-styleleft-work/#findComment-1608320 Share on other sites More sharing options...
eaglehopes Posted May 12, 2023 Author Share Posted May 12, 2023 2 hours ago, kicken said: The .style.* properties only provide values directly assigned to an element, either via JS or via a style="" attribute, they do not reflect CSS applied via selectors. For that, you need to use getComputedStyle. I do not see anything in your current code that is changing the left attribute of your elements, so it'd never change to be zero. Scrolling does not affect the left attribute of an element if that was your intent. If you want to check if something has been scrolled out of view, you need to find the scroll position and compare it to the position of the element. Thanks kicken. Your solution is worked. Also I found another variable which changes while scrolling : getBoundingClientRect() of elements. I used the getBoundingClientRect() version and worked. Quote Link to comment https://forums.phpfreaks.com/topic/316298-why-doesnt-elements-styleleft-work/#findComment-1608327 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.