如何防止儿童DIV在更改CSS Zoom属性上从父级div中溢出？

发布于 2025-01-31 17:23:09 字数 1722 浏览 2 评论 0原文

我知道我们可以使用CSS Overflow属性来防止儿童内容溢出。

但是溢出：滚动属性并不能阻止溢出。

let zoomInElem = document.getElementById('zoomIn')
let zoomOutElem = document.getElementById('zoomOut')
let contentElement = document.getElementById('content')
zoomInElem.addEventListener('click', function () {
    console.log('zoomIn')
    contentElement.style.zoom = '200%'
})
zoomOutElem.addEventListener('click', function () {
    console.log('zoomOut')
    contentElement.style.zoom = '100%'
})

#main {
    width: 640px;
    height: 360px;
    border: solid;
}

#content {
    border: .1rem solid red;
    overflow: scroll;
}

button {
    margin: 1rem;
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <style>

    </style>
</head>

<body>
    <div>
        <button id="zoomIn">ZoomIn</button>
        <button id="zoomOut">ZoomOut</button>
    </div>
    <div id="main">
        <div id="content">
            <h1>Hi</h1>
            <h2>Hi</h2>
            <h3>Hi</h3>
            <h4>Hi</h4>
        </div>
    </div>

    <script>

    </script>
</body>

</html>

如何通过单击Zoomin按钮来防止更改CSS Zoom属性的溢出？

原文

I know we can prevent overflow of child content using CSS overflow property.

But the overflow: scroll property is not preventing overflow.

let zoomInElem = document.getElementById('zoomIn')
let zoomOutElem = document.getElementById('zoomOut')
let contentElement = document.getElementById('content')
zoomInElem.addEventListener('click', function () {
    console.log('zoomIn')
    contentElement.style.zoom = '200%'
})
zoomOutElem.addEventListener('click', function () {
    console.log('zoomOut')
    contentElement.style.zoom = '100%'
})

#main {
    width: 640px;
    height: 360px;
    border: solid;
}

#content {
    border: .1rem solid red;
    overflow: scroll;
}

button {
    margin: 1rem;
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <style>

    </style>
</head>

<body>
    <div>
        <button id="zoomIn">ZoomIn</button>
        <button id="zoomOut">ZoomOut</button>
    </div>
    <div id="main">
        <div id="content">
            <h1>Hi</h1>
            <h2>Hi</h2>
            <h3>Hi</h3>
            <h4>Hi</h4>
        </div>
    </div>

    <script>

    </script>
</body>

</html>

How can I prevent overflow on changing CSS zoom property by clicking ZoomIn button?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白况 2025-02-07 17:23:09

尝试设置溢出：滚动；在外部div 上

#main {  position: relative;overflow: scroll;}

Try To Set overflow: scroll; on outer div

#main {  position: relative;overflow: scroll;}

回复收藏 0 原文

黄昏下泛黄的笔记 2025-02-07 17:23:09

您可以定义width和的高度 #content，或设置Overflow #Main <代码>滚动。

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <style>
        #main {
            width: 640px;
            height: 360px;
            border: solid;
            overflow: scroll; 
        }

        #content {
            /*width: 100%; 
            height: 100%; */
            border: .1rem solid red;
            /* overflow: scroll; */
        }

        button {
            margin: 1rem;
        }
    </style>
</head>

<body>
    <div>
        <button id="zoomIn">ZoomIn</button>
        <button id="zoomOut">ZoomOut</button>
    </div>
    <div id="main">
        <div id="content">
            <h1>Hi</h1>
            <h2>Hi</h2>
            <h3>Hi</h3>
            <h4>Hi</h4>
        </div>
    </div>

    <script>
        let zoomInElem = document.getElementById('zoomIn')
        let zoomOutElem = document.getElementById('zoomOut')
        let contentElement = document.getElementById('content')
        zoomInElem.addEventListener('click', function () {
            contentElement.style.zoom = '200%'
        })
        zoomOutElem.addEventListener('click', function () {
            contentElement.style.zoom = '100%'
        })
    </script>
</body>

</html>

You can either define the width and height of #content, or set the overflow of #main to scroll.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <style>
        #main {
            width: 640px;
            height: 360px;
            border: solid;
            overflow: scroll; 
        }

        #content {
            /*width: 100%; 
            height: 100%; */
            border: .1rem solid red;
            /* overflow: scroll; */
        }

        button {
            margin: 1rem;
        }
    </style>
</head>

<body>
    <div>
        <button id="zoomIn">ZoomIn</button>
        <button id="zoomOut">ZoomOut</button>
    </div>
    <div id="main">
        <div id="content">
            <h1>Hi</h1>
            <h2>Hi</h2>
            <h3>Hi</h3>
            <h4>Hi</h4>
        </div>
    </div>

    <script>
        let zoomInElem = document.getElementById('zoomIn')
        let zoomOutElem = document.getElementById('zoomOut')
        let contentElement = document.getElementById('content')
        zoomInElem.addEventListener('click', function () {
            contentElement.style.zoom = '200%'
        })
        zoomOutElem.addEventListener('click', function () {
            contentElement.style.zoom = '100%'
        })
    </script>
</body>

</html>

回复收藏 0 原文

~没有更多了~