how can i capture the whole scrollable div tag

the issue which i am facing now is by center part is a scrallable div tag but when ever i take a screen shot it just the the present viewing screen… it is any way is avalable to capture the whole div tag

My JS part

import * as htmlToImage from 'html-to-image';
import download from 'downloadjs';
export default function GuestRoom(){
    const [todos,setTodos] = useState([{data:"I will complete all the Todo's of the day",id:0}])
    const [toDo,setToDo] = useState("")
    const addInTodo = (e) =>{
        setTodos([...todos,{data:toDo,id:todos.length}])
        e.preventDefault()
    }
    const deleteTodo = index =>{
        const listTodo = [...todos];
        listTodo.splice(index,1);
        setTodos(listTodo)
    }
    const [showInfo,setInfo] = useState(false)
    const downloadSS = () =>{
        var today = new Date();
        var date = today.getFullYear()+''+(today.getMonth()+1)+''+today.getDate();
        var time = today.getHours()+''+today.getMinutes()+''+today.getSeconds();
        var dateTime = date+'_'+time;
        let ssPart = document.getElementsByClassName('ToDo')
        htmlToImage.toPng(ssPart[0])
        .then(function (image) {
            download(image, `Web-TodoOf-${dateTime}.png`);
        });
    }
    return(
        <div className="guestRoom">
            <header>
                <div className="Headder">
                    <p><FaUser size={50}/></p>
                    <h1 className="headTitle">Guest Room</h1>
                    <button className="infoIcon" onClick={()=>setInfo(!showInfo)}><RiFileInfoLine size={30} color="yellow"/></button>
                </div>
            </header>
            <main>
                <div className="ToDo">
                    { showInfo? 
                        <div className="warningData">
                            <TiWarningOutline size={20}/>
                            <p className="warningText">
                                <b>Note:</b>Hello Alien, You are now in Guest Mode. So,
                                All your Today's list may get delete just after closing this App.. 
                                So, if Today's TODO is importent You can login by your gMail account 
                                and store in our database for 24h or else you can take a screenshot 
                                of by pressing the screenshot button
                            </p>
                            <button className="infoIcon" onClick={()=>setInfo(!showInfo)}><RiCloseCircleLine size={20}/></button>
                        </div> : null
                    }
                    <h2><FaClipboardCheck/> I have Todo:</h2>
                    <ul>
                        {todos.map((todo,index)=>(
                            <li id={todo.id}>
                                <div className="TodoListPart">
                                    <p>{todo.data}</p>
                                    <p className="deleteAlign">
                                        <button className="deleteAlignbtn" onClick={()=>deleteTodo(index)}>
                                            <MdDeleteForever size={20}/>
                                        </button>
                                    </p>
                                </div>
                            </li>))}
                    </ul>
                </div>
            </main>
            <footer>
                <div>
                    <form className="inputGrid" onSubmit={addInTodo}>
                        <input 
                            type="text" 
                            className="insertData" 
                            placeholder="I have todo ..." 
                            value={toDo} 
                            onChange={(e)=>{setToDo(e.target.value)}}/>  
                        <button type="submit" className="addTodo"><RiSendPlaneFill size={25} color="white"/></button>
                    </form>
                </div>
                <div className="screenshot">
                    <p><button className="ssBtn" onClick={downloadSS}>Take Screenshot</button></p>
                </div>
            </footer>
        </div>
    )
}

And my CSS

.warningData{
    border-radius: 5px;
    border: 1px solid rgb(252, 255, 59);
    background-color: rgba(255, 240, 36, 0.801);
    text-align: left;
    font-size: smaller;
    padding: 10px;
    padding: 0 0;
    margin: 0 0;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 5px;
    top:82px;
    right: 5px;
    position: fixed;

}

header{
    top:0;
    left: 0;
    width: 100%;
    height: auto;
    position:fixed;
    
}
main{
    position:static;
}
footer{
    position:fixed;
    width: 100%;
    bottom: 0;
    right: 0;
    background-color: rgb(77, 77, 77);
}

.inputGrid{
    display: grid;
    grid-template-columns: auto 15%;
    grid-column-gap: 5px;
}

.guestRoom{
    display: grid;
    grid-template-rows: auto auto auto;
    grid-row: 5px;
}

.ToDo{
    top:90px;
    right: 5px;
    left: 5px;
    bottom: 94px;

    position:fixed;
    overflow-y: scroll;

    border-radius: 10px;
    border: 2px solid rgb(165, 107, 32);
    background-image: linear-gradient(rgb(255,255,255),rgb(255,255,255),rgb(255,255,255));
}

.screenshot{
    width: 100%;
    text-align: center;
}

.infoIcon{
    background-color: transparent;
    border: transparent;
}

.warningText{
    padding: 0 0;
    margin: 0 0;
}

.Headder{
    display: grid;
    grid-template-columns: 20% auto 15%;
    grid-column-gap: 5px;
    text-align: center;
    background-color: rgb(77, 77, 77);
    color: rgb(255, 255, 255);
}
.headTitle{
    text-align: left;
    width: 100%;
}

.ssBtn{
    border-radius: 20px;
    text-align: center;
    background-color: rgba(41, 255, 184, 0.795);
    border: transparent;
    box-shadow: 0px 2px rgba(223, 223, 223, 0.808);
}

.deleteAlignbtn{
    background-color: transparent;
    border: transparent;
    width: 100%;
    height: 100%;
}

.TodoListPart{
    display: grid;
    grid-template-columns: auto 15%;
    grid-column-gap: 8px;
    background-color: transparent;
    border-radius: 0px 10px 20px 0px;
    border-right: 1px solid rgb(77, 77, 77);
    border-bottom: 1px solid rgb(77, 77, 77);
}

.deleteAlign{
    text-align: right;
}

.addTodo{
    border-radius: 50px;
    text-align: center;
    background-color: transparent;
    border:transparent;
}

.insertData{
    width: 100%;
    padding: 5px 5px;
    margin: 5px 4px;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid rgb(255, 255, 255);
    background-color: #83838377;
    border-radius: 5px;
    color:rgb(255, 255, 255);
    font-size: 16px;
}

h2{
    font-size: 30px;
    padding: 0 0;
    margin: 3px 3px;
}

[Sukarnascience]

Sorry to disappoint sir, I was failed to solve the problem so I change and used all other alternative library which are available but still it was not taking the long screen shot… So after thinking about it we discontinued this idea …

On Wed, 6 Oct 2021, 23:39 Igor Silva, @.***> wrote:

Hi @Sukarnascience https://github.com/Sukarnascience, have you ever solved that? I’m facing something similar

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bubkoo/html-to-image/issues/152#issuecomment-936820507, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALIHTPCXOQ2WR2YRIZYELNDUFSGGRANCNFSM47MCCJXA .

[anti-destin]

I resolved the issue by resizing the container div: https://github.com/bubkoo/html-to-image/issues/43#issuecomment-1021304264