在Web開發中，我們通常會根據后端返回的數據來渲染前端頁面。當涉及到滾動條時，我們也需要按照后端返回的數據來設置滾動條的位置。以下是一個基本的實現方案。

// 根據后端返回的數據設置滾動條位置
function setScrollBarPosition(position) {
// 獲取滾動條元素
const scrollBar = document.getElementById('scroll-bar');
// 獲取文本內容元素
const content = document.getElementById('content');
// 設置滾動條位置
scrollBar.scrollTop = position;
// 設置文本內容位置
content.scrollTop = position;
}
// 根據滾動條位置獲取數據
function getDataByScrollBarPosition() {
// 獲取滾動條元素
const scrollBar = document.getElementById('scroll-bar');
// 獲取滾動條位置
const position = scrollBar.scrollTop;
// 發送請求，獲取對應的數據
fetch(/api/scroll-data?position=${position})
.then(response => response.json())
.then(data => {
// 根據返回的數據更新頁面
// ......
});
}

上面的代碼中，我們定義了兩個函數。第一個函數setScrollBarPosition接收一個數字參數表示滾動條的位置，然后根據這個位置來設置滾動條和文本內容的位置。第二個函數getDataByScrollBarPosition根據滾動條的位置向后端發送請求獲取對應數據，并對頁面進行更新。

在實際應用中，我們可以在頁面初始化時調用setScrollBarPosition函數來根據后端返回的數據來初始化滾動條位置。然后在用戶滾動時調用getDataByScrollBarPosition函數來獲取對應數據。這樣，我們就可以按照后端返回的數據來設置滾動條了。