Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace alert in web api, scrollwidth property #34733

Merged
merged 6 commits into from
Jul 12, 2024
Merged

Replace alert in web api, scrollwidth property #34733

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b4ea400
Replace alert in scrollwidth example
evelinabe Jul 5, 2024
59a160f
Merge branch 'mdn:main' into 7566-replace-alert-scrollwidth
evelinabe Jul 9, 2024
852315e
Code review changes
evelinabe Jul 12, 2024
63e1a4b
Merge branch 'main' into 7566-replace-alert-scrollwidth
evelinabe Jul 12, 2024
c338f3a
Code review changes
evelinabe Jul 12, 2024
07c07e7
Update index.md
Josh-Cena Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 84 additions & 60 deletions files/en-us/web/api/element/scrollwidth/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,73 +26,97 @@ without a need for horizontal scrollbar, its `scrollWidth` is equal to

## Value

A number.
An integer corresponding to the scrollWidth pixel value of the element.
evelinabe marked this conversation as resolved.
Show resolved Hide resolved

## Examples

### Detecting overflowing content

In this example, we will use the `scrollWidth` property to check if the content of an element is overflowing its boundaries. We have two `div` elements, the first with a width of `100px`, and the second `div` without a fixed width. Their content is exactly the same, and we will use a button to check if the content is overflowing the container by logging a message.
evelinabe marked this conversation as resolved.
Show resolved Hide resolved

#### HTML

```html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Example</title>
<style>
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

#aDiv {
width: 100px;
}

button {
margin-bottom: 2em;
}
</style>
</head>

<body>
<div id="aDiv">FooBar-FooBar-FooBar-FooBar</div>
<button id="aButton">Check for overflow</button>

<div id="anotherDiv">FooBar-FooBar-FooBar-FooBar</div>
<button id="anotherButton">Check for overflow</button>
</body>
<script>
const buttonOne = document.getElementById("aButton");
const buttonTwo = document.getElementById("anotherButton");
const divOne = document.getElementById("aDiv");
const divTwo = document.getElementById("anotherDiv");

//check to determine if an overflow is happening
function isOverflowing(element) {
return element.scrollWidth > element.offsetWidth;
}

function alertOverflow(element) {
if (isOverflowing(element)) {
alert("Contents are overflowing the container.");
} else {
alert("No overflows!");
}
}

buttonOne.addEventListener("click", () => {
alertOverflow(divOne);
});

buttonTwo.addEventListener("click", () => {
alertOverflow(divTwo);
});
</script>
</html>
<div id="aDiv">FooBar-FooBar-FooBar-FooBar</div>
evelinabe marked this conversation as resolved.
Show resolved Hide resolved
<button id="aButton">Check for overflow</button>
<div id="anotherDiv">FooBar-FooBar-FooBar-FooBar</div>
<button id="anotherButton">Check for overflow</button>
<pre id="log"></pre>
evelinabe marked this conversation as resolved.
Show resolved Hide resolved
```

#### CSS

```css
div {
padding: 0.15em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

button {
margin: 0.15em 0 1em 0;
}

#aDiv {
width: 100px;
}
```

#### JavaScript

```js
const aButton = document.getElementById("aButton");
const anotherButton = document.getElementById("anotherButton");

const aDiv = document.getElementById("aDiv");
const anotherDiv = document.getElementById("anotherDiv");

// Check if the scrollWidth is bigger than the offsetWidth or not
function isOverflowing(element) {
return element.scrollWidth > element.offsetWidth;
}

function checkOverflow(element) {
if (isOverflowing(element)) {
log(`Contents are overflowing, scrollWidth is ${element.scrollWidth}px`);
} else {
log(`No overflows, scrollWidth is ${element.scrollWidth}px`);
}
}

aButton.addEventListener("click", () => {
checkOverflow(aDiv);
});

anotherButton.addEventListener("click", () => {
checkOverflow(anotherDiv);
});
```

### Result
```css hidden
#log {
height: 60px;
overflow: scroll;
padding: 0.25rem;
border: 1px solid black;
}
```

```js hidden
const logElement = document.getElementById("log");

function log(text) {
logElement.innerText = `${logElement.innerText}> ${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
```

#### Result

Click the buttons to check if the content is overflowing the containers.

{{EmbedLiveSample('Examples')}}
{{EmbedLiveSample('Examples', '100%', 210)}}

## Specifications

Expand Down