使用窗口滚动条来控制溢出的div的滚动 - Javascript

Question

我有一个public class MainActivity extends Activity { private ListView lv; private ProgressDialog pDialog; private ListViewAdapter adapter; private ArrayList<String> arrayList; private int scrollState; private int offset = 0; private boolean flag = false; private boolean loadingMore = false; ProgressBar pb; private int scrollpos; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); lv = (ListView) findViewById(R.id.list); if (savedInstanceState == null) { arrayList = new ArrayList<>(); } else { arrayList = (ArrayList<String>)savedInstanceState.getSerializable("list"); } //Adding footer for ListView:- pb = new ProgressBar(this); lv.addFooterView(pb); //Setting Adapter:- adapter = new ListViewAdapter(this, arrayList); lv.setAdapter(adapter); if (!flag) { new loadMoreListView().execute(); flag = true; } lv.setOnScrollListener(new AbsListView.OnScrollListener() { @Override public void onScrollStateChanged(AbsListView view, int scrollState) { MainActivity.this.scrollState = scrollState; } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { scrollpos = totalItemCount; int lastPos = firstVisibleItem + visibleItemCount; if (lastPos == totalItemCount && !loadingMore) { if (totalItemCount < 250) { new loadMoreListView().execute(); } else { lv.removeFooterView(pb); } } } }); } @Override protected void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); outState.putSerializable("list", arrayList); } @Override protected void onRestoreInstanceState(Bundle savedInstanceState) { super.onRestoreInstanceState(savedInstanceState); arrayList = (ArrayList<String>) savedInstanceState.getSerializable("list"); } private class loadMoreListView extends AsyncTask<Void, Void, String> { protected String doInBackground(Void... unused) { loadingMore = true; String result = null; String url = "http://api.androidhive.info/json/imdb_top_250.php?offset=" + offset; try { URL mUrl = new URL(url); HttpURLConnection urlConnection = (HttpURLConnection) mUrl.openConnection(); urlConnection.connect(); InputStream inputStream = urlConnection.getInputStream(); BufferedReader br = new BufferedReader(new InputStreamReader(inputStream)); StringBuffer buffer = new StringBuffer(); String str = ""; while ((str = br.readLine()) != null) { buffer.append(str); } result = buffer.toString(); } catch (Exception e) { e.printStackTrace(); } return result; } protected void onPostExecute(String result) { System.out.println("Result is"+result); if (result != null) { try { JSONArray array = new JSONArray(result); for (int i = 0; i < array.length(); i++) { arrayList.add(array.getJSONObject(i).getString("title")); } System.out.println("arry list count is====>"+arrayList.size()); adapter.notifyDataSetChanged(); offset++; // offset = offset + 10; loadingMore = false; } catch (Exception e) { e.printStackTrace(); } } else { lv.removeFooterView(pb); } } } } 的div，其中包含一个对div来说太宽的元素，因此它会滚动。问题是元素太高，使用元素的滚动条查看其内容相当麻烦。

更好的是使用窗口滚动条来控制元素的滚动，因为它们的位置固定在窗口的边缘。

这有可能吗？我似乎无法理解这样做的好方法。

以下问题的示例。请注意，此包装元素必须能够在现有页面布局的流程中工作。

https://jsfiddle.net/3y1549jk/2/

overflow-x:auto

.wrapper {
  position: absolute;
  width: 75%;
  left: 12.5%;
  right: 12.5%;
  height: 200%;
  top: 12.5%;
  bottom: 12.5%;
  background-color: red;
  overflow-x: auto;
}

.content {
  position: absolute;
  width: 150%;
  height: 75%;
  margin: 7.5%;
  background-color: blue;
  color: white;
  padding: 7.5%;
}

Answer 1

使用位置 fixed 代替 absolute ..

.wrapper {
  position: absolute;
  width: 75%;
  left: 12.5%;
  right: 12.5%;
  height: 200%;
  top: 12.5%;
  bottom: 12.5%;
  background-color: red;
  overflow-x: auto;
}

.content {
  position: fixed;
  width: 150%;
  height: 75%;
  margin: 7.5%;
  background-color: blue;
  color: white;
  padding: 7.5%;
}

<!-- I would like the window to control the horizontal scrolling of the .wrapper div -->
<div class="wrapper">
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at libero imperdiet justo finibus vehicula. Integer ac risus quis lectus pretium condimentum in sit amet mauris. Maecenas et sagittis justo. Cras diam urna, placerat aliquet metus non, interdum cursus nisl. Quisque cursus elit feugiat, tempus diam in, faucibus felis.
  </div>
</div>